html - 如何在 元素中居中图像？

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; 设置在容器，你已经做过了。

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

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