CSS vertical-align 属性

CSS vertical-align 属性用于设置一个元素相对于其他元素在垂直方向上的对齐方式。该属性只适用于行内元素和表格单元格。

语法

vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <length> | <percentage> | inherit;

• baseline：默认值，元素的基线与父元素的基线对齐。
• sub：将元素的基线放到父元素的基线下面，一般用于上标或下标的设置。
• super：将元素的基线放到父元素的基线上面，一般用于上标或下标的设置。
• text-top：将元素的顶部对齐到当前行中字体最高字符的顶部。
• text-bottom：将元素的底部对齐到当前行中字体最低字符的底部。
• middle：将元素的中心点对齐到当前行的中心点。
• top：将元素的顶部对齐到父元素的顶部边缘。
• bottom：将元素的底部对齐到父元素的底部边缘。
• <length>：设置元素相对于父元素的偏移量。可以是正数（向上偏移）或负数（向下偏移）。例如：vertical-align: 10px。
• <percentage>：设置元素相对于父元素高度的偏移量。可以是正数（向上偏移）或负数（向下偏移）。例如：vertical-align: 50%。
• inherit：规定应该从父元素继承 vertical-align 属性的值。

注意事项

• 如果父元素的 line-height 设置为一个数字，则子元素的垂直位置是以父元素的基线为准，而不是以父元素的顶部或底部为准。
• 除了行内元素和表格单元格之外，其他元素无法应用该属性。
• 当表格单元格中同时存在垂直和水平对齐时，需要使用 vertical-align 属性来设置垂直对齐，同时使用 text-align 属性来设置水平对齐。

实例

以下实例演示了如何使用 vertical-align 属性设置元素垂直对齐方式：

<p>以下实例演示了如何使用 vertical-align 属性设置元素垂直对齐方式：</p>
<div>
  <span style="vertical-align: sub;">下标</span>
  <span style="vertical-align: super;">上标</span>
  <span style="vertical-align: middle;">垂直居中</span>
</div>
<table>
  <tr>
    <td style="vertical-align: top;">向上对齐</td>
    <td style="vertical-align: bottom;">向下对齐</td>
    <td style="vertical-align: middle;">垂直居中</td>
  </tr>
</table>

结论

CSS vertical-align 属性可以帮助开发者轻松地对行内元素和表格单元格进行垂直对齐设置。同时，该属性还支持像素和百分比单位的设置，更加方便开发者进行自定义设置。在实际开发过程中，我们可以根据需要选择合适的 vertical-align 属性类型，以实现灵活多样的对齐效果。