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

Question

我在这个CSS问题上苦苦挣扎:http://jsfiddle.net/timkl/JbEX8/

我希望两个div使用"display:inline-block"水平对齐,但是当我向其中一个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.