vertical-align

**vertical-align** CSS 属性设置内联、内联块或表格单元格盒子的垂直对齐方式。

试一试

vertical-align 属性可以在两种情况下使用。

请注意，vertical-align 只适用于内联、内联块和表格单元格元素：您不能使用它来垂直对齐 块级元素。

语法

css
/* Keyword values */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* <length> values */
vertical-align: 10em;
vertical-align: 4px;

/* <percentage> values */
vertical-align: 20%;

/* Global values */
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: revert-layer;
vertical-align: unset;

vertical-align 属性指定为以下列出的值之一。

内联元素的值

相对于父元素的值

这些值相对于父元素垂直对齐元素。

baseline

将元素的基线与父元素的基线对齐。一些 替换元素 的基线（如 <textarea>）没有在 HTML 规范中指定，这意味着它们使用此关键字的行为在不同浏览器之间可能会有所不同。

sub

将元素的基线与父元素的下标基线对齐。

super

将元素的基线与父元素的上标基线对齐。

text-top

将元素的顶部与父元素字体的顶部对齐。

text-bottom

将元素的底部与父元素字体的底部对齐。

middle

将元素的中间与基线加上父元素 x 高度的一半对齐。

<length>

将元素的基线对齐到其父元素基线上方给定长度的位置。允许使用负值。

<percentage>

将元素的基线对齐到其父元素基线上方给定百分比的位置，该值为 line-height 属性的百分比。允许使用负值。

相对于行的值

以下值相对于整行垂直对齐元素。

top

将元素及其子元素的顶部与整行的顶部对齐。

bottom

将元素及其子元素的底部与整行的底部对齐。

对于没有基线的元素，底部边距边缘将被使用。

表格单元格的值

baseline（以及 sub、super、text-top、text-bottom、<length> 和 <percentage>）

将单元格的基线与行中所有其他基线对齐的单元格的基线对齐。

top

将单元格的顶部填充边缘与行的顶部对齐。

middle

将单元格的填充框在行内居中。

bottom

将单元格的底部填充边缘与行的底部对齐。

允许负值。

正式定义

初始值baseline
适用于内联级和表格单元格元素。它也适用于 ::first-letter 和 ::first-line。
继承否
百分比指的是元素本身的 line-height
计算值对于百分比和长度值，为绝对长度，否则为指定的关键字。
动画类型一个 长度

正式语法

vertical-align = 
  [ first | last ]        ||
  <'alignment-baseline'>  ||
  <'baseline-shift'>      

<alignment-baseline> = 
  baseline      |
  text-bottom   |
  alphabetic    |
  ideographic   |
  middle        |
  central       |
  mathematical  |
  text-top      

<baseline-shift> = 
  <length-percentage>  |
  sub                  |
  super                |
  top                  |
  center               |
  bottom               

<length-percentage> = 
  <length>      |
  <percentage>

示例

基本示例

HTML

html
<div>
  An <img src="frame_image.svg" alt="link" width="32" height="32" /> image with
  a default alignment.
</div>
<div>
  An
  <img class="top" src="frame_image.svg" alt="link" width="32" height="32" />
  image with a text-top alignment.
</div>
<div>
  An
  <img class="bottom" src="frame_image.svg" alt="link" width="32" height="32" />
  image with a text-bottom alignment.
</div>
<div>
  An
  <img class="middle" src="frame_image.svg" alt="link" width="32" height="32" />
  image with a middle alignment.
</div>

CSS

css
img.top {
  vertical-align: text-top;
}
img.bottom {
  vertical-align: text-bottom;
}
img.middle {
  vertical-align: middle;
}

结果

行框中的垂直对齐

HTML

html
<p>
top:         <img style="vertical-align: top" src="star.png" alt="star"/>
middle:      <img style="vertical-align: middle" src="star.png" alt="star"/>
bottom:      <img style="vertical-align: bottom" src="star.png" alt="star"/>
super:       <img style="vertical-align: super" src="star.png" alt="star"/>
sub:         <img style="vertical-align: sub" src="star.png" alt="star"/>
</p>

<p>
text-top:    <img style="vertical-align: text-top" src="star.png" alt="star"/>
text-bottom: <img style="vertical-align: text-bottom" src="star.png" alt="star"/>
0.2em:       <img style="vertical-align: 0.2em" src="star.png" alt="star"/>
-1em:        <img style="vertical-align: -1em" src="star.png" alt="star"/>
20%:         <img style="vertical-align: 20%" src="star.png" alt="star"/>
-100%:       <img style="vertical-align: -100%" src="star.png" alt="star"/>
</p>

结果

表格单元格中的垂直对齐

在这个示例中，我们有一个表格，它只有一行，包含六个单元格。该行将vertical-align设置为bottom作为默认值。

  • 前四个单元格分别设置了自己的vertical-align值，这些值会覆盖行的值。
  • 第五个单元格没有设置任何vertical-align值，因此会继承行的值。

第六个单元格仅用于确保单元格足够高以看到效果。

HTML

html
<table>
  <tr class="bottom">
    <td class="baseline">baseline</td>
    <td class="top">top</td>
    <td class="middle">middle</td>
    <td>bottom</td>
    <td>Row's style</td>
    <td>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
      pretium felis eu sem mattis vulputate.
    </td>
  </tr>
</table>

CSS

css
table {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

table,
th,
td {
  border: 1px solid black;
}

td {
  padding: 0.5em;
  font-family: monospace;
}

.bottom {
  vertical-align: bottom;
}

.baseline {
  vertical-align: baseline;
}

.top {
  vertical-align: top;
}

.middle {
  vertical-align: middle;
}

结果

规范

规范
层叠样式表级别 2 修订版 2 (CSS 2.2) 规范
# propdef-vertical-align

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅