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

Posted 2023-03-29

【中文标题】如何在容器中居中元素，同时保持它们垂直对齐？

【英文标题】：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>

【参考方案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 在文档中应该是唯一的。