vertical-align那些你不知道的细节

在 CSS 中，vertical-align 属性主要是用于内联元素、内联块级元素和表格单元格的内容的垂直对齐，通常是相对于其包含块（父元素）进行对齐，但具体情况有所不同：

内联元素和内联块级元素

对于内联元素和内联块级元素，vertical-align 主要是相对于其行内元素（line box）的基线进行对齐，而不是直接与父元素进行对齐。例如：

<p>这是一个 <img src="example.jpg" alt="Example Image" style="vertical-align: middle;"> 示例。</p>

在这个示例中，图片会相对于文本行的中线进行对齐，而不是相对于父元素 <p> 本身的中线对齐。

表格单元格

对于表格单元格（<td> 或 <th>），vertical-align 属性会影响单元格内内容的垂直对齐方式。这里的对齐是相对于单元格的高度（即父元素的高度）进行的。例如：

<table border="1">
  <tr>
    <td style="height: 100px; vertical-align: top;">顶部对齐的内容</td>
    <td style="height: 100px; vertical-align: bottom;">底部对齐的内容</td>
  </tr>
</table>

在这个示例中，单元格内的内容会分别相对于单元格（父元素）的顶部和底部对齐。

总结

• 对于内联元素和内联块级元素，vertical-align 主要是相对于行框（line box）进行对齐，而不是直接相对于父元素。
• 对于表格单元格，vertical-align 则是相对于单元格的高度进行对齐。

这个区别很重要，因为它决定了实际的对齐效果是在元素的哪个参照系上发生的。