为什么这个内联块元素的内容不垂直居中对齐

Question

遇到了一个奇怪的CSS问题。有人能解释一下为什么具有内容的方框没有垂直对齐吗？

如果在带有类 .divPutTextToFixIssue 的中放置文本，它就可以正确对齐。

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

   #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;
    }

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

- Anton Skovorodko

Answer 1

默认的vertical-align值为baseline，这意味着

将元素框的基线与父容器框的基线对齐

注意：您可以通过在您的.divAccountData选择器中添加vertical-align: baseline来查看此默认值的效果。由于baseline是默认值，因此对齐方式不会改变。

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

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

基线的定义为：

大多数字母“坐在”其上方，下方则延伸了降部。

为什么添加文本可以解决问题？因为：

  

'inline-block'元素的基线是正常流中最后一个行框的基线，除非它没有流内行框或者它的 'overflow' 属性计算值不是 'visible'，这时基线就是底边缘。

出自CSS2可视化格式模型细节

因此，仅添加一个字符就会更改基线，导致第二个块与相同的垂直对齐。这仅适用于两个块包含相同数量的行。尝试向其中一个块添加更多单词，您将看到如果没有在第二个块上强制使用vertical-align:top，则它将根据第一个块中存在的文本行数而移动。

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

- andyb

Answer 2

您需要在.divAccountPicker中添加vertical-align: top;演示。

- xception

Answer 3

在你的 .divAccountData, .divAccountPicker 类中添加 vertical-align:top，就像这样。

.divAccountData, .divAccountPicker {
    vertical-align: top;
}

演示

如果您曾经使用过display:inline-block;，那么通常会使用vertical-align:top

- Rohit Azad Malik

Answer 4

试一下

.divPutTextToFixIssue {
   display:inline-block;
 }

jsFiddle

- Afshin