html - 如何使两个相邻 float 的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 一直向左浮动。这样做正确的是并排 float 两个 div。

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

Answer 1

不使用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/