CSS vertical-align 语法
在 CSS 中，vertical-align 属性用于设置行内元素（inline）、行内块级元素（inline-block）或表格单元格（table-cell）的垂直对齐方式。
语法：
vertical-align: 长度值 | 百分比 | 关键字;说明：
vertical-align 的取值有以下 3 种。
- 长度值：使用具体的长度单位（如 px、em 等）。将元素的基线相对于父元素的基线进行提升或降低。正值提升元素，负值降低元素。
- 百分比：相对于元素的 line-height 的百分比，通常用来微调垂直对齐。
- 关键字：常用的关键字如下所示。
baseline ( 默认值 )：将元素的基线与父元素的基线对齐。如果元素没有基线（例如图片），则将其下边缘与父元素的基线对齐。sub：将元素的基线降低到父元素的下标位置。super：将元素的基线升高到父元素的上标位置。top：将元素的顶端与整行的顶端对齐。text-top：将元素的顶端与父元素内容区域的顶端对齐（通常是父元素字体顶端）。middle：将元素的垂直中点与父元素基线加上父元素 x 高度的一半对齐。这通常用于垂直居中对齐文本和图片等行内内容。bottom：将元素的底端与整行的底端对齐。text-bottom：将元素的底端与父元素内容区域的底端对齐（通常是父元素字体底端）。
对于 vertical-align 属性，小伙伴们要清楚以下几点。
- vertical-align 属性只适用于行内元素、行内块级元素和表格单元格。它对块级元素（如 div、p）是无效的。
- 对于行内元素，vertical-align 是相对于父元素的基线或行框进行对齐。
- 对于表格单元格，vertical-align 控制单元格内容在单元格内部的垂直对齐。
- vertical-align 对 Flex 布局和 Grid 布局是无效的。因此在 Flex/Grid 中，我们应该使用 align-items 或 align-self 来控制垂直对齐。
CSS vertical-align 摘要
| 属于 | CSS 文本属性 |
|---|---|
| 使用频率 | 高 |
| 是否继承 | 否 |
| 默认值 | baseline |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS vertical-align 示例
接下来，我们通过几个简单的例子来讲解一下 CSS vertical-align 属性是如何使用的。
示例 1：vertical-align 对齐图片和文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
border: 1px solid gray;
padding: 10px;
margin: 20px;
font-size: 20px; /* 文本大小 */
}
img {
/* 图片默认为 inline 元素 */
margin-right: 5px;
}
.box1 img { vertical-align: baseline; } /* 图片底部与文本基线对齐 */
.box2 img { vertical-align: middle; } /* 图片中点与文本中线对齐 */
.box3 img { vertical-align: top; } /* 图片顶部与行顶对齐 */
.box4 img { vertical-align: bottom; } /* 图片底部与行底对齐 */
</style>
</head>
<body>
<div class="box1">
<img src="imgs/bird.jpg" alt="">baseline 对齐
</div>
<div class="box2">
<img src="imgs/bird.jpg" alt="">middle 对齐
</div>
<div class="box3">
<img src="imgs/bird.jpg" alt="">top 对齐
</div>
<div class="box4">
<img src="imgs/bird.jpg" alt="">bottom 对齐
</div>
</body>
</html>页面效果如下图所示。
分析：
对于 vertical-align 属性来说，baseline 是默认值，此时图片底部会与文本基线对齐。middle 会将图片的垂直中心与文本的中点对齐。top 会将图片的顶部与文本的顶部对齐。
小伙伴们可能会发现图片下方总有一条消不掉的缝隙。其实这是因为 vertical-align 默认为 baseline，浏览器为了容纳文字的 “尾巴”（如 g、y），在基线下方留出了空间。
如果想要去除这个缝隙，我们可以将图片的 vertical-align 设置为 bottom、middle 或 top，或者将图片设置为 display: block;。
示例 2：vertical-align 对齐表格单元格内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table {
border-collapse: collapse; /* 合并边框 */
margin: 20px;
width: 300px;
}
td {
border: 1px solid gray;
padding: 10px;
height: 60px;
}
td:nth-child(1) { vertical-align: top; } /* 顶部对齐 */
td:nth-child(2) { vertical-align: middle; } /* 垂直居中 */
td:nth-child(3) { vertical-align: bottom; } /* 底部对齐 */
</style>
</head>
<body>
<table>
<tr>
<td>顶部对齐</td>
<td>垂直居中</td>
<td>底部对齐</td>
</tr>
</table>
</body>
</html>页面效果如下图所示。
分析：
默认情况下，表格单元格的内容是垂直居中的 (vertical-align: middle;)。然后我们可以使用 vertical-align 属性来设置单元格内容的垂直对齐方式。
