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

Posted 2023-03-29

【中文标题】如何居中对齐 li 内的图像？

【英文标题】：how to center align the images inside li?

【发布时间】：2017-08-11 16:21:14

【问题描述】：

对不起，我是网络开发新手。

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

    <div id="services">
        <ul>
            <li><img src="images/icon.png"    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"    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"    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"    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"    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"    style="display:block"/><p class="ser-tag">Title6</p><p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p></li>
        </ul>
    </div>

【问题讨论】：

使用 flexbox 布局。像这样：jsfiddle.net/abhitalks/6r591jba

非常感谢@Abhitalks 您的解决方案也运行良好！

【参考方案1】：

将 display: inline block 添加到 li 和 text-align: center; 以使它们居中。 为每个 li 元素添加宽度，以便它们传播。 将font-size:0 添加到包装器中，这样html 中的空格就不会占用任何空间。

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

【参考方案2】：

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

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

【参考方案3】：

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

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

<div id="services">
  <ul>
    <li><img src="images/icon.png"    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"    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"    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"    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"    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"    style="display:block" />
      <p class="ser-tag">Title6</p>
      <p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p>
    </li>
  </ul>
</div>

【参考方案4】：

你可以使用，

#services ul
   display: flex;

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

这对你有帮助，请尝试。