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

前端之家收集整理的这篇文章主要介绍了css – div的内容影响水平对齐,内联块问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在这个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/

解决方法

将vertical-align添加到类框:
vertical-align: middle;

另请参阅更新的jsfiddle.

猜你在找的CSS相关文章