Question

对不起我的愚蠢问题，因为我是网络开发人员的新手。

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

    <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

在width元素上指定<li>，然后应用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;将其内容居中：

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中的空格不占用任何空间。

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

如何居中对齐里面的图像？

4 个答案: