CSS 中 vertical-align 属性是如何对齐元素的？

CSS 中 vertical-align 的对齐规则

CSS 中的 vertical-align 属性用于指定元素在垂直方向上的对齐方式。

对齐规则：

• 首先确定行内元素中高度最大的元素（基准元素）。

• 其他元素垂直对齐到基准元素的：

  • 基线(baseline)：文本字符底部对齐。
  • 上(top)：顶部对齐。
  • 下(bottom)：底部对齐。
  • 中(middle)：中部对齐。
  • 百分比(例如 50%)：指定相对于基准元素高度的百分比对齐。

示例代码中的对齐：

• 文本2（内联元素）：

  • vertical-align 设置为 bottom，因此它对齐到行内最高元素的高度，也就是文本2本身。

• 图片：

  • vertical-align 设置为 middle，但在这个示例中，文本2是最高的元素。由于文本2本身未对齐到中间（它对齐到底部），因此图片也被拉到了底部。

以上就是CSS 中 vertical-align 属性是如何对齐元素的？的详细内容，更多请关注其它相关文章！