div的内容影响水平对齐，inline-block问题 [英] Content of div affects horizontal alignment, inline-block issue

问题描述

我在使用这个CSS问题时遇到了一些问题： http://jsfiddle.net/timkl/JbEX8/

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上的示例：http://jsfiddle.net/timkl/JbEX8/

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

推荐答案

将 vertical-align 添加到类框：

vertical-align: middle;

另请参阅更新的 jsfiddle 。

这篇关于div的内容影响水平对齐，inline-block问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！