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

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>

Answer 1

默认的vertical-align值是baseline

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

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

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

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

基线定义为

大多数字母“坐”的线和下行延伸的线

要解决为什么添加文本似乎可以解决问题的原因是

'inline-block' 的基线是它在正常流中的最后一个 line box 的基线，除非它没有 in-flow line box 或者它的 'overflow' 属性的计算值不是 'visible'，在在这种情况下，基线是底部边距边缘。

来自CSS2 视觉格式模型详细信息

因此，仅添加一个字符会更改基线，从而导致第二个块以相同的垂直对齐方式出现。 这仅在两个块包含相同数量的行时才有效。 尝试向其中一个块添加更多单词，您会看到，如果不强制第二个块上的vertical-align:top ，它将根据第一个块中存在的文本行数移动。

编辑：找到了一个相关的问题为什么这个内联块元素被向下推？

Answer 2

您需要添加vertical-align: top; 到.divAccountPicker演示

Answer 3

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

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

现场演示

如果你以前用display:inline-block; 比习惯于全方位vertical-align:top

Answer 4

尝试这个

.divPutTextToFixIssue {
   display:inline-block;
 }

js小提琴