1. Web
  2. CSS
  3. vertical-align

vertical-align

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

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

试一试

vertical-align: baseline;

vertical-align: top;

vertical-align: middle;

vertical-align: bottom;

vertical-align: sub;

vertical-align: text-top;

<section class="default-example" id="default-example">
  <p>
    Align the star:
    <img id="example-element" src="/shared-assets/images/examples/star2.png" />
  </p>
</section>

#default-example > p {
  line-height: 3em;
  font-family: monospace;
  font-size: 1.2em;
  text-decoration: underline overline;
}

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-height 对齐。

<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;
}

结果

规范

规范
CSS 内联布局模块级别 3
# propdef-vertical-align

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面由MDN 贡献者于修改。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.