Question

遇到了一个奇怪的CSS问题。有人可以解释为什么有内容的盒子没有垂直对齐吗？

如果您将文本放在带有.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;
}

Answer 1

默认vertical-align值为baseline

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

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

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

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

Baseline定义为

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

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

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

来自CSS2 Visual formatting model details

因此，仅添加一个字符会更改基线，从而导致第二个块出现在相同的垂直对齐方式上。如果两个块包含相同数量的行，则此仅有效。尝试在其中一个块中添加更多单词，您将看到在第二个块上强制vertical-align:top它将移动，具体取决于第一个块中存在多少行文本。

修改：找到相关问题Why is this inline-block element pushed downward?

Answer 2

您需要将vertical-align: top;添加到.divAccountPicker demo

Answer 3

............................... 您好，现在在vertical-align:top 类中添加.divAccountData, .divAccountPicker 像这样

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

<强> LIve demo

如果您曾经使用过display:inline-block;而不是用于所有方式vertical-align:top

Answer 4

试试这个

.divPutTextToFixIssue {
   display:inline-block;
 }

jsFiddle

为什么此内联块元素具有未垂直对齐的内容

4 个答案: