为什么此inline-block元素具有不垂直对齐的内容 [英] Why does this inline-block element have content that is not vertically aligned

问题描述

遇到一个奇怪的CSS问题。

Came across a weird CSS issue. Can someone explain why the box having content is not vertically aligned?

如果你把文本放在span .divPutTextToFixIssue - 它可以正确对齐。

If you put text inside the span with class .divPutTextToFixIssue - it aligns properly.

http://jsfiddle.net/KgqJS / 88 /

<div id="divBottomHeader">
    <div class="divAccountPicker">
       <span class="divPutTextToFixIssue"><span>                 
    </div>
    <div class="divAccountData">
        <span>Balance: $555</span>
    </div>
</div>​

#divBottomHeader {
    background-color: #d5dbe0;
    height: 43px;
}
.divAccountPicker {
    display: inline-block;
    background: blue;            
    width: 200px;
    height: 40px;
}
.divAccountData {
    display: inline-block;
    background: red;
    width: 400px;
    height: 40px;
}​

推荐答案

=http://www.w3.org/wiki/CSS/Properties/vertical-align> vertical-align 值为 baseline 其中

The default vertical-align value is baseline which

将框的基线与父框的基线对齐

Aligns the baseline of the box with the baseline of the parent box

注意：您可以在操作中查看此默认值，方法是将 vertical-align：baseline .divAccountData 选择器。由于 baseline 是默认值，因此比对不变。

Note: You can see this default value in action by adding vertical-align:baseline to your .divAccountData selector. Since baseline is default the alignment is unchanged.

您需要将其更改为 top 以对齐顶部的块，例如：

You need to change it to top to align the blocks at the top, for example:

.divAccountData {
    display: inline-block;
    background: red;
    width: 400px;
    height: 40px;
    vertical-align: top;
}

基准定义为

大多数字母坐 descends extensions

the line upon which most letters "sit" and below which descenders extend

要解决为什么添加文字似乎可以解决问题，因为

To address why adding text seems to fix the problem it is because

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

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.

来自 CSS2视频格式模型详情

因此，只添加一个字符会更改基线，导致第二个块出现在同一垂直对齐。如果两个块都包含相同数量的行，则此 only 工作原理。尝试在一个块中添加更多的单词，你会发现没有强制 vertical-align：top 在第二个块它会移动取决于多少行文本存在

So adding just a single character changes the baseline, causing the second block to appear at the same vertical alignment. This only works if both blocks contain the same number of lines. Try adding more words to one of your blocks and you will see that without forcing vertical-align:top on the second block it will move depending on how many lines of text exist in the first block.

编辑：找到相关问题为什么这个inline-block元素被向下推？

这篇关于为什么此inline-block元素具有不垂直对齐的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！