【问题标题】：How to center the list icon for an image inside a li element如何将 li 元素内的图像的列表图标居中
【发布时间】：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" height="20" width="150"></li>
    </ul>

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

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

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

【问题讨论】：

你能对你的尝试展示一下吗？
我怀疑这是你想要的答案：stackoverflow.com/a/8283361/3369753
你试过标签了吗？
@MouhamadKawas center 在 HTML5 中已弃用。我们可以避免使用它。
@Fabrizio Calderan Fiddle 按要求添加。

标签： html css

【解决方案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" height="20" width="150"></div></li>
    </ul>

【讨论】：