如何居中对齐 li 内的图像？

Question

抱歉我的愚蠢问题，因为我是网络开发新手。

我得到了一个 880px 的包装器，里面是下面的代码。我试图让所有 li 元素在 880px 内水平均匀分布，并使 li 元素内的所有内容居中对齐。我尽量避免使用 margin-right 来展开它们，因为最后一个 li 应该完全对齐到右边。实现此目标的最佳 css 技巧是什么？提前致谢！

    <div id="services">
        <ul>
            <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block"/><p class="ser-tag">Title1</p><p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p></li>
            <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block"/><p class="ser-tag">Title2</p><p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p></li>
            <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block"/><p class="ser-tag">Title3</p><p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p></li>
            <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block"/><p class="ser-tag">Title4</p><p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p></li>
            <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block"/><p class="ser-tag">Title5</p><p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p></li>
            <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block"/><p class="ser-tag">Title6</p><p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p></li>
        </ul>
    </div>

Answer 1

在 <li> 元素上指定 width，然后应用 text-align:center。图片元素 <img> 是 inline elements，因此您不必使用 margin:auto; 将它们居中对齐。

<li class="slide" style="position: absolute; display: none; width: 880px; text-align:center;">

Answer 2

你可能会用到，

#services ul{
   display: flex;
}
#services ul li {
   flex-direction: column;
   justify-content: center;
   flex-grow: 1;
}

这对你有帮助，请试试。

Answer 3

默认情况下 li 元素不会分布在整个宽度上，因此您必须对其应用 100% 宽度，然后使用 text-align: center;:[=14= 将其内容居中]

li {
  width: 100%;
  text-align: center;
}

<div id="services">
  <ul>
    <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block" />
      <p class="ser-tag">Title1</p>
      <p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p>
    </li>
    <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block" />
      <p class="ser-tag">Title2</p>
      <p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p>
    </li>
    <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block" />
      <p class="ser-tag">Title3</p>
      <p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p>
    </li>
    <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block" />
      <p class="ser-tag">Title4</p>
      <p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p>
    </li>
    <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block" />
      <p class="ser-tag">Title5</p>
      <p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p>
    </li>
    <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block" />
      <p class="ser-tag">Title6</p>
      <p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p>
    </li>
  </ul>
</div>

Answer 4

将 display: inline block 添加到 li 并添加 text-align: center; 使其居中。为每个 li 元素添加宽度，以便它们展开。将 font-size:0 添加到包装器中，这样 HTML 中的 space 就不会占用任何 space.

查看完整解决方案： http://codepen.io/shippin/pen/KWQgoJ

如何居中对齐 li 内的图像？

how to center align the images inside li?

css

center

alignment

html-lists