CSS的 vertical-align 属性用于控制元素在垂直方向上的对齐方式。它适用于行内元素和表格单元格（table-cell）。
下面土嘎嘎小编分享 vertical-align 属性的一些常见取值及其作用：
1、baseline:元素的基线与父元素的基线对齐（默认值）。
2、top:将元素的顶部与父元素的顶部对齐。
3、middle:将元素的中间与父元素的基线居中对齐。
4、bottom:将元素的底部与父元素的底部对齐。
5、text-top:将元素的顶部与父元素的文本内容的顶部对齐。
6、text-bottom:将元素的底部与父元素的文本内容的底部对齐。
7、sub:使元素相对于父元素的基线下降至下标位置。
8、super:使元素相对于父元素的基线上升至上标位置。
9、length （例如： 10px ）：将元素的基线相对于父元素的基线上/下移指定长度。
vertical-align 属性可以应用于行内元素，也可以应用于表格单元格（以及表格中的行和列）。具体效果可能会因元素类型、父元素的布局和其他CSS属性的影响而有所不同。
土嘎嘎技术网友情提示： vertical-align 属性只能影响当前元素与父元素之间的垂直对齐关系，并不能将多个元素垂直对齐。要实现多个元素的垂直对齐，可能需要结合其他布局技术（如Flexbox或Grid）来实现更精确的控制。
下面土嘎嘎小编分享一些示例代码，展示了如何使用 vertical-align 属性来控制元素的垂直对齐方式：
1. 使用在行内元素中：
〓〓html代码如下：〓〓
<span style="vertical-align: baseline;">Baseline alignment</span>
<span style="vertical-align: top;">Top alignment</span>
<span style="vertical-align: middle;">Middle alignment</span>
<span style="vertical-align: bottom;">Bottom alignment</span>
2. 在表格单元格中：
〓〓html代码如下：〓〓
<table style="border-collapse: collapse;">
<tr>
<td style="vertical-align: top; border: 1px solid black;">Top aligned cell</td>
<td style="vertical-align: middle; border: 1px solid black;">Middle aligned cell</td>
<td style="vertical-align: bottom; border: 1px solid black;">Bottom aligned cell</td>
</tr>
</table>
3. 与文本内容对齐：
〓〓html代码如下：〓〓
<div style="line-height: 1.5;">
<span style="vertical-align: text-top;">Text top alignment</span>
<span style="vertical-align: baseline;">Baseline alignment</span>
<span style="vertical-align: text-bottom;">Text bottom alignment</span>
</div>
这些示例展示了 vertical-align 属性在不同上下文中的应用。你可以根据实际需求和布局要求调整属性值，并与其他CSS属性一起使用，以实现更复杂的对齐效果。