为什么这个内嵌块元素的内容不是垂直alignment的
遇到一个奇怪的CSS问题。 有人能解释为什么有内容的盒子不是垂直alignment的吗？
如果你把文本放在span类中，并使用.divPutTextToFixIssue类，它就会正确alignment。
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; }
默认的vertical-align值是baseline
将框的基线与父框的基线alignment
注意：您可以通过将vertical-align:baseline添加到.divAccountDataselect器来查看此默认值。 由于baseline是默认的，所以alignment不变。
您需要将其更改为top以alignmenttop的块，例如：
.divAccountData { display: inline-block; background: red; width: 400px; height: 40px; vertical-align: top; }
基线被定义为
大部分字母“坐”在下面的下行线延伸的线
要解决为什么添加文本似乎解决了这个问题是因为
“内联块”的基线是正常stream程中最后一个线框的基线，除非其中没有stream入线框或“溢出”属性的计算值不是“可见”，否则这种情况下的基线是底部边缘。
从CSS2可视化格式模型的细节
因此，只添加一个字符就会改变基线，导致第二个块出现在相同的垂直alignment中。 这只适用于两个块都包含相同行数的情况。 尝试添加更多的单词到您的块之一，你会看到，没有强制vertical-align:top的第二个块，它将移动取决于第一个块中有多less行文本存在。
编辑：发现一个相关的问题为什么这个内嵌块元素向下推？
你需要添加vertical-align: top; 到.divAccountPicker 演示
………………………….你好现在在你的.divAccountData, .divAccountPicker 类中添加vertical-align:top像这样
.divAccountData, .divAccountPicker { vertical-align: top; }
演示
如果你用来display:inline-block; 比用来全方位的vertical-align:top
尝试这个
.divPutTextToFixIssue { display:inline-block; }
的jsfiddle
