为啥这个 inline-block 元素的内容不是垂直对齐的

Posted 2023-03-05

【中文标题】为啥这个 inline-block 元素的内容不是垂直对齐的

【英文标题】：Why does this inline-block element have content that is not vertically aligned为什么这个 inline-block 元素的内容不是垂直对齐的

【发布时间】：2012-10-08 15:57:31

【问题描述】：

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

【参考方案1】：

默认的vertical-align 值为baseline，其中

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

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

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

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

Baseline 定义为

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

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

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

来自CSS2 Visual formatting model details

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

编辑：找到一个相关问题Why is this inline-block element pushed downward?

【参考方案2】：

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

【参考方案3】：

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

.divAccountData, .divAccountPicker 
    vertical-align: top;

LIve demo

如果你习惯了display:inline-block;而不是习惯了所有方式vertical-align:top

【参考方案4】：

试试这个

.divPutTextToFixIssue 
   display:inline-block;
 

jsFiddle