行内对齐 vertical-align

MDN vertical-align

在CSS中，文本的垂直对齐通常指的是行内元素（inline elements）或表格单元格中的内容如何相对于其容器进行上下对齐。对于这些情况，可以使用 vertical-align 属性来控制。

vertical-align 属性适用于以下几种情况：

1. 行内元素和表格单元格：调整行内元素相对于基线、顶部、底部等的位置。
2. 表格单元格：控制单元格内容的垂直对齐方式。

以下是 vertical-align 的一些常用值：

• baseline：默认值。将元素放置在父元素的基线上。
• top：把元素的顶端与行中最高元素的顶端对齐。
• middle：把此元素放置在父元素的中间。
• bottom：把元素的底端与行中最低元素的底端对齐。
• text-top：把元素的顶端与父元素字体的顶端对齐。
• text-bottom：把元素的底端与父元素字体的底端对齐。
• <percentage>：使用百分比值定义垂直对齐。例如，50% 会把元素的基线放置在父元素基线之上 50% 的位置。
• <length>：使用长度单位定义垂直偏移量。
• sub：使元素降低到下标位置。
• super：使元素升高到上标位置。

示例代码：

img {
  vertical-align: middle; /* 将图片与其相邻文本垂直居中对齐 */
}

td {
  vertical-align: top; /* 表格单元格内的内容顶部对齐 */
}

如果你需要处理的是块级元素的垂直居中问题，那么可能需要用到 Flexbox 或 Grid 布局，或者通过绝对定位配合 transform 属性来实现。