css - 如何居中对齐 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

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

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