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

Question

为什么这个内联块元素的内容不是垂直对齐的？遇到了一个奇怪的CSS问题。有人能解释一下为什么包含内容的框不垂直对齐吗？如果将文本放入类的span中.divPutTextToFixIssue-它正确地对齐。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;}

Answer 1

默认vertical-align价值是baseline哪一个

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

注意：通过添加vertical-align:baseline敬你的.divAccountData选择器。自baseline默认情况下，对齐方式不变。

你需要把它改成top要对齐顶部的块，例如：

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

基线定义为

大多数字母“坐”的一行，向下延伸。

寻址为什么添加文本似乎解决了这个问题，因为

“内联块”的基线是其在正常流中的最后一行框的基线，除非它没有流内行框，或者它的“溢出”属性具有“可见”以外的计算值，在这种情况下，基线是底部边距。

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