如何将图像的列表图标置于li元素

Question

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属性，它也不起作用。

如何垂直居中子弹图标？

Answer 1

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

li img {
    vertical-align:middle;
}

JSFiddle

Answer 2

您需要vertical-align img：

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>

Answer 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>