与 display-block 一起使用时元素的位置错误

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个children显示为"inline-block"。如果所有 children 都有内容，则一切正常。

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

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

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

注：我用的是Chrome40.

Answer 1

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

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

因此您需要更改 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;
}

Answer 2

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

vertical-align: middle;

与 display-block 一起使用时元素的位置错误

Wrong position of elements when used with display-block

html

css

attributes