<div>元素的内容影响水平对齐，inline-block问题

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/

- timkl

Answer 1

在box类中添加vertical-align属性：

vertical-align: middle;

还可以查看更新的jsfiddle。

- scessor

Answer 2

您需要将它们浮动：

.box {
    float: left;

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

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

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

- Blender