vertical-align 垂直对齐方式

最新推荐文章于 2024-06-24 11:40:44 发布

一碗猪肉牛杂汤

最新推荐文章于 2024-06-24 11:40:44 发布

阅读量1.5k

点赞数 4

分类专栏： html 文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_45061726/article/details/128349336

版权

html 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

vertical-align 垂直对齐方式：

①只对行内元素或者行内块元素有效，所以该元素一定是子盒子，且一定有父盒子。
②想要调整哪个元素在父元素的垂直对齐方式，就作用到哪个元素上。参照物是父盒子。
③主要场景用在图片与文字在垂直方向上的居中对齐方式，还有文字的上标和下标。

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>