上海网站制作 公司钦州seo
vertical-align 垂直对齐方式：
①只对行内元素或者行内块元素有效，所以该元素一定是子盒子，且一定有父盒子。
②想要调整哪个元素在父元素的垂直对齐方式，就作用到哪个元素上。参照物是父盒子。
③主要场景用在图片与文字在垂直方向上的居中对齐方式，还有文字的上标和下标。
vertical-align 垂直对齐方式
- html文字与图片显示排列方式
- vertical-align 属性的值
- 使用场景
- 1. 设置图片与文字在父元素垂直居中对齐
- 2. 将子元素的顶端与图片的顶端对齐
- 3. 设置文字上标、下标显示
html文字与图片显示排列方式
如下代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>html文本显示情况</title><style>* {padding: 0;margin: 0;}.parent {width: 600px;font-size: 24px;border: 1px solid black;background-color: rgb(255, 152, 152);}.sub {background-color: skyblue;}</style>
</head>
<body style="padding: 30px;"><div class="parent">父元素-gg-rr1<span class="sub">子元素-yy-rr1</span><img src="11.png" alt=""></div>
</body>
</html>
如图所示：图片默认的垂直对齐方式是在父元素的基线上。子元素在父元素上占满一行，默认同父元素显示排列方式一样（因为把图片去除，父元素的高度就是文字的高度）。
图片下面有多余的空白高度
空白高度清除方式：
①第一种方式：图片向左浮动，父元素清除浮动
②第二种方式：图片使用vertical-align:bottom;属性在父元素底端对齐方式
如下图所示：
vertical-align 属性的值
| 属性值 | 描述 |
|---|---|
| baseline | 默认。元素放置在父元素的基线上。 |
| sub | 设置该元素为文本的 下标 对齐方式 |
| super | 设置该元素为文本的 上标 对齐方式 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| text-top | 把元素的顶端与父元素字体的顶端对齐 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
| text-bottom | 把元素的底端与父元素字体的底端对齐。 |
| % | 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。 |
使用场景
1. 设置图片与文字在父元素垂直居中对齐
第一步：将把图片元素放置在父元素的中部。
img {vertical-align: middle;
}
如图所示：
可以看到文字并不在中部区域，子元素上部分区域与下部分区域不对等。
第二步：
将子元素sub放置父元素的中部。
.sub {background-color: skyblue;vertical-align: middle;
}
如图所示：
这就实现了子元素与图片在父元素垂直方向上居中对齐。
2. 将子元素的顶端与图片的顶端对齐
将子元素sub设置为vertical-align: top;子元素的顶端就会与图片的顶端对齐
top属性值是把元素的顶端与行中最高元素的顶端对齐。
在前面看到，父元素的高度是由图片高度撑开的，所以父元素行中最高元素就是图片元素，。
.sub {background-color: skyblue;vertical-align: top;
}
如图所示：
3. 设置文字上标、下标显示
第一种方式： 设置文字上标下标，html有专门的上标标签<sup></sup>和下标标签<sub></sub>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>上标标签和下标标签</title><style>sup {font-size: 12px;}sub {font-size: 12px;}</style>
</head>
<body style="padding: 30px;"><div>2022年卡塔尔世界杯<sup>@TM</sup></div><div>2022年卡塔尔世界杯<sub>@MM</sub></div>
</body>
</html>
第二种方式：
- 使用vertical-align: super;设置上标
- 使用vertical-align: sub;设置上标
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>上标标签和下标标签</title><style>.sup {font-size: 12px;vertical-align: super;}.sub {font-size: 12px;vertical-align: sub;}</style>
</head>
<body style="padding: 30px;"><div>2022年卡塔尔世界杯<span class="sup">@TM</span></div><div>2022年卡塔尔世界杯<span class="sub">@MM</span></div></body>
</html>
两种方式效果如图所示：
