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

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在第二个块上，它将根据第一个块中存在多少行文本而移动。