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

本文介绍了div的内容影响水平对齐，inline-block问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

我在使用这个CSS问题时遇到了一些问题：

I'm struggling a bit with this CSS-issue: http://jsfiddle.net/timkl/JbEX8/

我想要两个div使用display：inline-block水平对齐，但是当我添加文本到其中一个div时，对齐关闭。

I want two divs to align horizontally using "display: inline-block", however when I add text to one of the divs, the alignment is off.

有没有办法让两个div在不借助浮动的情况下对齐？

Is there a way to make the two divs align without resorting to floats?

这是我的标记：

<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上的示例：

Check out my example on jsfiddle: http://jsfiddle.net/timkl/JbEX8/