div的内容影响水平对齐，内联块问题

Question

我正在努力解决这个CSS问题：http://jsfiddle.net/timkl/JbEX8/

我希望使用“display：inline-block”水平对齐两个div，但是当我向其中一个div添加文本时，对齐关闭。

有没有办法让两个div对齐而不需要使用浮点数？

这是我的标记：

<div class="box">
    <p>Some text</p>
</div><!-- /box -->

<div class="box">
    <!-- No text -->
</div><!-- /box -->

这是我的CSS：

body {
color: gray;
}

.box {
    background: #ccc;
    height: 100px;
    width: 200px;
    display: inline-block;   
}

查看我在jsfiddle上的示例：http://jsfiddle.net/timkl/JbEX8/

Answer 1

将vertical-align添加到课程box：

vertical-align: middle;

另请参阅更新后的jsfiddle。

Answer 2

你应该float他们：

.box {
    float: left;

    background: #ccc;
    height: 100px;
    width: 200px;
    display: inline-block;   
}

演示：http://jsfiddle.net/JbEX8/1/

请注意，由于您没有定义边距，因此它们之间没有间距。