如何在<li>元素中居中图像？

Question

我有一个ul，其单元格由图片和文字组成：

<ul class="special_ul">
  <li>
    <img src="img/solution_icon_optimize-efficnt.png">
    <a href = "">OTT</a>
  </li>
  <li>
    <img src="img/solution_icon_personal.png">
    <a href = "">Cloud Computing</a>
  </li>
  <li>
    <img src="img/solution_icon_diti-cx.png">
    <a href = "">Managed Services</a>
  </li>
  <li>
    <img src="img/solution_icon_biz-analitics.png">
    <a href = "">Social Media</a>
  </li>
</ul>

的CSS：

.special_ul li{
    padding-right: 10px;
    list-style-type: none;
    display: inline-block;
    text-align: center;
}

.special_ul li img , .special_ul li a{
    display:block;
}

问题是文本居中但图像不是：

（我用鼠标突出显示了列表，因此您可以看到图像不在中心）

如何使图像居中（水平）？

Answer 1

您可以删除img {display: block;}，默认情况下它是内嵌级别，它们将集中在容器上设置text-align: center;，您已经这样做了。

或者，如果您需要在margin: 0 auto;上保留display: block;，请添加img：

.special_ul li img {
  display: block;
  margin: 0 auto;
}