在CSS中,文本的垂直对齐通常指的是行内元素(inline elements)或表格单元格中的内容如何相对于其容器进行上下对齐。对于这些情况,可以使用 vertical-align
属性来控制。
vertical-align
属性适用于以下几种情况:
- 行内元素和表格单元格:调整行内元素相对于基线、顶部、底部等的位置。
- 表格单元格:控制单元格内容的垂直对齐方式。
以下是 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 属性来实现。