CSS vertical-align属性

在CSS中，vertical-align属性可以用来设置行内元素和表格元素中的内容相对于其容器的垂直对齐方式。它可以应用于行内元素、表格单元格中的单元格内容和表格单元格中的表格行。

语法

vertical-align: baseline|top|middle|bottom|text-top|text-bottom|initial|inherit;

• baseline：默认值。元素的基线与父元素的基线对齐。
• top：元素的顶部与容器的顶部对齐。
• middle：元素的中间与容器的中间对齐。
• bottom：元素的底部与容器的底部对齐。
• text-top：元素的顶部与父元素的文本的顶部对齐。
• text-bottom：元素的底部与父元素的文本的底部对齐。
• initial：设置属性为默认值。
• inherit：从父元素继承属性值。

示例

示例1：设置表格单元格中的内容垂直居中

<table>
  <tr>
    <td style="vertical-align:middle">居中文本</td>
    <td>默认文本</td>
  </tr>
</table>

在表格单元格中，设置vertical-align属性为middle，使内容垂直居中。

示例2：设置行内元素的图片垂直居中

<div>
  <img style="vertical-align:middle" src="example.png" alt="example">
  <span>行内元素的图片和文字</span>
</div>

在行内元素中，设置vertical-align属性为middle，使图片垂直居中。

示例3：设置表格单元格中的行垂直居中

<table>
  <tr style="vertical-align:middle">
    <td>文本1</td>
    <td>文本2</td>
  </tr>
</table>

在表格行中，设置vertical-align属性为middle，使行垂直居中。