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

【问题标题】：Wrong position of elements when used with display-block与显示块一起使用时元素的位置错误
【发布时间】：2015-04-22 07:59:11
【问题描述】：

我有以下 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 个子项都显示为“inline-block”。如果所有的孩子都有内容，一切都很好。

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

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

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

注意：我使用的是 Chrome 40。

【问题讨论】：

对我来说看起来不错，它们与默认基线对齐

标签： html css attributes

【解决方案1】：

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

'inline-block' 的基线是其在正常流中的最后一个行框的基线，除非它没有流内行框或者它的 'overflow' 属性具有除 'visible 之外的计算值'，在这种情况下，基线是底部边缘。

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

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

Updated Example

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

【讨论】：

【解决方案2】：

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

vertical-align: middle;

【讨论】：