27

遇到一个奇怪的 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>

4

4 回答 4

47

默认vertical-align值baseline是

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

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

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

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

基线定义为

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

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

'inline-block' 的基线是它在正常流中的最后一个行框的基线，除非它没有流入行框，或者如果它的 'overflow' 属性具有除 'visible' 之外的计算值，在在这种情况下，基线是底部边距边缘。

来自CSS2 视觉格式化模型细节

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

编辑：找到一个相关的问题为什么这个 inline-block 元素被向下推？

于 2012-10-18T08:44:10.210 回答
1

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

于 2012-10-18T08:43:22.190 回答
0

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

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

现场演示

如果你习惯了display:inline-block; 比习惯于各种方式vertical-align:top

于 2012-10-18T08:43:01.453 回答
-1

试试这个

.divPutTextToFixIssue {
   display:inline-block;
 }

jsFiddle

于 2012-10-18T08:43:27.503 回答