来了一个奇怪的CSS问题。有人可以解释为什么包含内容的框不是垂直对齐的吗？
如果您将文本放在span中，并使用.divPutTextToFixIssue类 – 它会正确对齐。
<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;
}
解决方法
默认的
vertical-align值是基线
Aligns the baseline of the Box with the baseline of the parent Box
注意：您可以通过向.divAccountData选择器添加vertical-align：baseline来查看此默认值。由于基线是默认值，所以对齐方式不变。
您需要将其更改为顶部以对齐顶部的块，例如：
.divAccountData {
display: inline-block;
background: red;
width: 400px;
height: 40px;
vertical-align: top;
}
Baseline定义为
the line upon which most letters “sit” and below which descenders extend
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 Visual formatting model details
所以添加一个字符会改变基线，导致第二个块出现在相同的垂直对齐方式。这仅在两个块都包含相同数量的行时才起作用。尝试向其中一个块添加更多的单词，您将看到没有强制垂直对齐：第二个块的顶部将根据第一个块中存在多少行文本而移动。