如何将 li 元素内的图像的列表图标居中

Posted 2023-03-04

【中文标题】如何将 li 元素内的图像的列表图标居中

【英文标题】：How to center the list icon for an image inside a li element

【发布时间】：2015-10-17 16:21:30

【问题描述】：

li
  height: 20px;
  line-height: 20px;
  vertical-align: middle;

<ul style="list-style-type: circle">
        <li><img src="http://latex.codecogs.com/gif.latex?A=B&plus;\left&space;(&space;C&plus;D&space;\right&space;)^2"  ></li>
    </ul>

由于并非所有浏览器都支持 MathML，因此我将图像用于方程式。当我调整图像的高度时，我在文本中使用图像时没有问题。但是我在使用图像作为列表元素时遇到问题，项目符号图标显示为与图像底部对齐。

我尝试将li 元素的高度指定为与图像的height 相同，并将相同的值分配给line-height 属性。在那之后，即使我使用vertical-align: middle 属性它也不起作用。

如何使项目符号图标垂直居中？

【问题讨论】：

你能对你的尝试展示一下吗？

我怀疑这是你想要的答案：***.com/a/8283361/3369753

你试过

@MouhamadKawas center 在 html5 中已弃用。我们可以避免使用它。

@Fabrizio Calderan Fiddle 按要求添加。

【参考方案1】：

你需要vertical-alignimg:

ul  list-style-type: circle; 
li  height: 20px; line-height: 20px; position:relative; 
li img  
  height:20px; width:150px; border: 1px solid blue;
  vertical-align: middle; /* <-- this */

li::after 
  content: '';
  display: block;
  position: absolute;
  top: 50%; width: 100%;
  border-bottom: 1px solid red;

<ul>
    <li>
        <img src="http://latex.codecogs.com/gif.latex?A=B&plus;\left&space;(&space;C&plus;D&space;\right&space;)^2" />
    </li>
</ul>

【讨论】：

这里发生了同样的事情，它显示的对齐方式比中心略高。

@Zalajbeg：它只在中间。由于图像，它看起来如此。我已经更新了上面的sn-p，你可以清楚的看到它在图片的中间。

【参考方案2】：

不要将vertical-align:middle;添加到列表项中，而是将其添加到图像中：

li img 
    vertical-align:middle;

JSFiddle

【讨论】：

我做到了，但它显示的对齐方式比中心略高。

由于图片末尾有上标2，它才会出现这种情况，您可以在图片中添加负号margin-top 来说明这一点：jsfiddle.net/3ff9n9kt/2跨度>

这是一个很好的解释。谢谢你！决定接受哪个答案是一个两难的选择，但是我认为下面的示例将更好地表明，如果有人在网络上搜索并来到这里，项目符号将居中。我真的很难过，我不能同时接受这两个答案。

没问题，乐于助人！

【参考方案3】：

你可以把图片放在一个div里面

li
  height: 20px;
  line-height: 20px;

div 
   text-align: center;





<ul style="list-style-type: circle">
        <li><div><img src="http://latex.codecogs.com/gif.latex?A=B&plus;\left&space;(&space;C&plus;D&space;\right&space;)^2"  ></div></li>
    </ul>