如何使两个相邻浮动的div居中

Question

我已经编写了以下 HTML，试图将两个 div 彼此相邻。

 <div id='wrapper' style='text-align:center;'>
    <div style='float:left;'>
        Lorem ipsum<br />
        dolor sit amet
    </div>
    <div style='float:left;'>
    Lorem ipsum<br />
    dolor sit amet
    </div>
</div>

但是，我编写的代码导致两个 div 一直向左浮动。这样做正确的是并排浮动两个 div。

我需要更改什么才能使两个 div 并排居中？

原文由 Vivian River 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您将必须自动为包装器 div 设置边距和可能的特定宽度

<div id="wrapper"></div>

在你的 CSS 中：

 #wrapper {
    width: 70%;
    margin: 0 auto;
}

原文由 Daff 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

而不是使用 float: left ，使用 display: inline-block ：

 <div id='wrapper' style='text-align: center;'>
    <div style='display: inline-block; vertical-align: top;'>
        Lorem ipsum<br />
        dolor sit amet,<br />
        consectetur adipisicing elit
    </div>
    <div style='display: inline-block; vertical-align: top;'>
        Lorem ipsum<br />
        dolor sit amet
    </div>
</div>

每个内部 div 的顶部使用 vertical-align: top 保持对齐。

示例：http: //jsfiddle.net/hCV8f/1/

原文由 jason_ruz 发布，翻译遵循 CC BY-SA 3.0 许可协议