Question

我有以下HTML / CSS文档：

HTML：

<div class="test" >
    <a>a</a>
    <div></div>
    <a >a</a>
</div>

CSS：

.test {
    border: 2px solid;
    font-size: 0;
}

.test > * {
    text-align: center;
    font-size: 20px;
    border: 1px solid;
    height: 40px;
    width: 50px;
    display: inline-block;
}

所有3个孩子都显示为“内嵌块”。如果所有孩子都有内容，一切都OK。

但如果这3个孩子中的任何一个没有内容，那么垂直对齐是完全错误的。

看看这个http://jsfiddle.net/ClementVidal/mb7wzy30/5/

有没有人知道为什么会发生这种情况以及出于什么原因？

注意：我正在使用Chrome 40。

Answer 1

10.8 Line height calculations: the 'line-height' and 'vertical-align' properties

“内联块”的基线是正常流程中其最后一个线框的基线，除非它没有流入线框或者其“溢出”属性的计算值不是“可见” '，在这种情况下，基线是底部边缘边缘。

因此，您需要更改vertical-align元素的inline-block属性。

如上所述，vertical-align属性的默认值为baseline。当兄弟元素包含文本时，它们与基线对齐。通过将vertical-align属性值更改为top之类的内容，文本将不再与中间元素的基础对齐。

Updated Example

.test > * {
    border: 1px solid;
    height: 40px;
    width: 50px;
    display: inline-block;
    vertical-align: top;
}

Answer 2

您始终可以手动设置垂直对齐：

vertical-align: middle;

与显示块一起使用时元素的位置错误

2 个答案: