CSS 垂直对齐

2025年3月26日 | 阅读 2 分钟

CSS 垂直对齐属性用于定义内联或表格单元格框的垂直对齐方式。这是 CSS 中一个比较直观的属性。但对于初学者来说，这并不是一个很容易掌握的属性。

作用

它应用于内联或内联块元素。
它影响元素本身的对齐，而不是其内容（表格单元格除外）。
当应用于表格单元格时，它会影响单元格内容，而不是单元格本身。

CSS 垂直对齐值

值	描述
baseline	它将元素的基线与父元素的基线对齐。这是默认值。
length	它用于通过指定长度来增加或减少元素的高度。允许使用负值。
%	它用于增加或减少元素相对于“line-height”属性的百分比。允许使用负值。
sub	它将元素对齐为下标。
super	它将元素对齐为上标。
top	它将元素的顶部与行中最高元素的顶部对齐。
bottom (底部)	它将元素的底部与行中最低的元素底部对齐。
text-top	元素的顶部与父元素字体的顶部对齐。
middle	元素被放置在父元素的中间。
text-bottom	元素的底部与父元素字体的底部对齐。
initial	它将此属性设置为其默认值。
inherit	从其父元素继承此属性。

CSS 垂直对齐示例

<!DOCTYPE html>
<html>
<head>
<style>
img.top {
    vertical-align: text-top;
}
img.bottom {
    vertical-align: text-bottom;
}
</style>
</head>
<body>
<p><img src="good-morning.jpg" alt="Good Morning Friends"/> This is an image with a default alignment.</p> 
<p><img src="good-morning.jpg" class="top" alt="Good Morning Friends"/> This is an image with a text-top alignment.</p> 
<p><img src="good-morning.jpg" class="bottom" alt="Good Morning Friends"/> This is an image with a text-bottom alignment.</p>
</body>
</html>

输出

Good Morning Friends 这是具有默认对齐方式的图像。

Good Morning Friends 这是具有 text-top 对齐方式的图像。

Good Morning Friends 这是具有 text-bottom 对齐方式的图像。

下一个主题CSS White Space

CSS 垂直对齐

作用

CSS 垂直对齐值

CSS 垂直对齐示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS 垂直对齐

作用

CSS 垂直对齐值

CSS 垂直对齐示例

相关帖子

CSS Position Relative

CSS 按钮

CSS Text-shadow

CSS Float

CSS 行高

CSS 中的 Margin 和 Padding

CSS text-stroke

Less CSS

CSS filter

background-attachment

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器