vertical-align

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

CSS vertical-align 属性用来指定行内（inline）、行内区块（inline-block）、表格单元格（table-cell）盒子的垂直对齐方式。

尝试一下

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
/* 关键字值 */
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> 值 */
vertical-align: 10em;
vertical-align: 4px;

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

/* 全局值 */
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: revert-layer;
vertical-align: unset;

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

行内元素的值

相对父元素的值

这些值使元素相对其父元素垂直对齐：

baseline

使元素的基线与父元素的基线对齐。HTML 规范没有详细说明部分可替换元素的基线，如 <textarea>，这意味着这些元素使用此值的表现因浏览器而异。

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
适用元素inline-level and table-cell elements. It also applies to ::first-letter and ::first-line.
是否是继承属性否
Percentagesrefer to the line-height of the element itself
计算值for percentage and length values, the absolute length, otherwise the keyword as specified
动画类型a length

形式语法

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>
  <img src="frame_image.svg" alt="link" width="32" height="32" />
  默认对齐方式的图像
</div>
<div>
  <img class="top" src="frame_image.svg" alt="link" width="32" height="32" />
  字体顶部（text-top）对齐的图像
</div>
<div>
  <img class="bottom" src="frame_image.svg" alt="link" width="32" height="32" />
  字体底部（text-bottom）对齐的图像
</div>
<div>
  <img class="middle" src="frame_image.svg" alt="link" width="32" height="32" />
  中部（middle）对齐的图像
</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;
}

结果

规范

Specification
CSS Inline Layout Module Level 3
# propdef-vertical-align

浏览器兼容性

参见