上查看所有课程
CSS vertical-align 属性用于垂直对齐内联元素的文本。例如，
span {
vertical-align: super;
}浏览器输出
在这里，vertical-align 用于将 span 元素的内��与其父元素的上标基线对齐。
CSS Vertical-Align 语法
vertical-align 属性的语法是：
vertical-align: baseline | length | sub | super | top | text-top | middle | bottom| text-bottom | initial | inherit;这里，
baseline：将元素与父元素的基线对齐（默认值）length：使用长度值（如px、pt等）相对于父元素基线对齐元素，允许使用负值top：将元素的顶部与父元素的顶部对齐middle：将元素的中间与父元素的中间对齐bottom：将元素的底部与父元素的底部对齐text-top：将元素的顶部与父元素字体的顶部对齐text-bottom：将元素的底部与父元素字体的底部对齐sub：将元素作为父元素的下标对齐super：将元素作为父元素的上标对齐baseline-middle：将元素的基线与父元素的中间对齐inherit：继承其父元素的vertical-align属性值
注意：vertical-align 属性不适用于块级元素。
Vertical-Align 示例
让我们看一个 vertical-align 属性的示例，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS vertical-align</title>
</head>
<body>
<p>
The star <span class="baseline">⭐</span> is aligned to the baseline
of the paragraph.
</p>
<p>
The star <span class="length">⭐</span> is aligned by 10px relative
to the baseline of the paragraph.
</p>
<p>
The star <span class="sub">⭐</span> is aligned to the subscript of
the paragraph.
</p>
<p>
The star <span class="super">⭐</span> is aligned to the superscript
of the paragraph.
</p>
<p>
The star <span class="top">⭐</span> is aligned to the top of the
paragraph.
</p>
<p>
The star <span class="text-top">⭐</span> is aligned to the text-top
of the paragraph.
</p>
<p>
The star <span class="middle">⭐</span> is aligned to the middle of
the paragraph.
</p>
<p>
The star <span class="bottom">⭐</span> is aligned to the bottom of
the paragraph.
</p>
<p>
The star <span class="text-bottom">⭐</span> is aligned to the
text-bottom of the paragraph.
</p>
</body>
</html>p {
border: 1px solid black;
line-height: 2;
}
/* aligns span to the baseline of the parent element */
span.baseline {
vertical-align: baseline;
}
/* aligns span by 10px relative to baseline of parent element */
span.length {
vertical-align: 10px;
}
/* aligns span to subscript position */
span.sub {
vertical-align: sub;
}
/* aligns span to superscript position */
span.super {
vertical-align: super;
}
/* aligns span to the top of the parent element */
span.top {
vertical-align: top;
}
/* aligns span to the top of the parent element's font */
span.text-top {
vertical-align: text-top;
}
/* aligns span to the middle of the parent element */
span.middle {
vertical-align: middle;
}
/* aligns span to the bottom of the parent element */
span.bottom {
vertical-align: bottom;
}
/* aligns span to the bottom of the parent element's font */
span.text-bottom {
vertical-align: text-bottom;
}浏览器输出
上面的示例演示了 vertical-align 属性不同值的用法。
注意：vertical-align 属性常用于将图像与周围文本以及表格单元格内的内容对齐。