如何在容器中居中元素，同时保持它们垂直对齐？答案

【问题标题】：How do I center element within a container while keeping them vertically aligned?如何在容器中居中元素，同时保持它们垂直对齐？
【发布时间】：2014-12-20 20:50:22
【问题描述】：

不太确定如何正确命名。最好用图片来解释。我试图将项目保持居中，但是当一行中的项目太多而无法正确放置时，新行应与其上方的项目对齐，而不是在容器内居中。

我正在努力实现这一目标：

而不是这个：

这是我的 JSfiddle：

http://jsfiddle.net/6kwzy6La/

还有我的 HTML：

<div class="container2">
    <div class="content">

        <div id="box">
            <p> Some text goes here </p>
        </div>

        <div id="box">
            <p> Some text goes here </p>
        </div>

        <div id="box">
            <p> Some text goes here </p>
        </div>

        <div id="box">
            <p> Some text goes here </p>
        </div>

        <div id="box">
            <p> Some text goes here </p>
        </div>

    </div>
</div>

【问题讨论】：

标签： html css alignment center text-align

【解决方案1】：

http://jsfiddle.net/6kwzy6La/

Container1
{
text-align: center;
}

Container2
{
text-align: left;
}

【讨论】：

【解决方案2】：

一种方法是如果有奇数个框，则在最后一个框添加适当的右边距，像这样

#box:last-child:nth-child(2n + 1) {
    margin-right:240px;
}

见http://jsfiddle.net/6kwzy6La/6/

请注意，您应该使用class 而不是id，因为ids 在文档中应该是唯一的。

【讨论】：