为什么我的内联块元素垂直不对齐？

揭开内联块元素垂直未对齐的神秘面纱

遇到一个令人费解的 CSS 问题，即内联块元素的内容出现垂直未对齐？罪魁祸首可能是默认的垂直对齐值。

内联块元素具有默认的基线垂直对齐方式，它将框的基线与其父元素的基线对齐。当元素不包含流内行框或具有可见以外的溢出值时，这可能会导致意外对齐。

考虑以下 HTML 和 CSS：

<div>
<pre class="brush:php;toolbar:false">#divBottomHeader {
  height: 43px;
}
.divAccountPicker {
  width: 200px;
  height: 40px;
}
.divAccountData {
  width: 400px;
  height: 40px;
}

在此示例中，“.divAccountData”元素与“.divAccountPicker”相比看起来向下移动。将文本添加到“.divPutTextToFixIssue”会神奇地垂直对齐元素。

此行为是由于内联块元素的基线由其最后一个行框的基线确定的事实而产生的。通过向“.divPutTextToFixIssue”添加文本，我们有效地更改了基线并强制对齐到顶部。

但是，如果两个块包含不同的行数，则对齐将再次中断。为了确保一致的垂直对齐，请使用 Vertical-align 属性强制对齐：

.divAccountData {
  vertical-align: top;
}

这会将“.divAccountData”的基线与“.divAccountPicker”的顶部对齐，无论其行数如何。