css-奇怪的vertical-align属性

最新推荐文章于 2022-10-24 18:29:23 发布

Yannnnnm

最新推荐文章于 2022-10-24 18:29:23 发布

阅读量336

点赞数

文章标签： css

本文链接：https://blog.csdn.net/Yannnnnm/article/details/107730287

版权

vertical-align 基本概念

定义

vertical-align 属性设置元素的垂直对齐方式。

使用场景

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。有负长度值和百分比值。
一般用于有图片或者按钮在的地方。一旦你使用了行内块元素，那么line-height属性就很难让图文或者按钮对齐了。所以我们需要vertical-align属性。

常用值

奇怪的vertical-align

奇怪的负值

当你设置正值（height >= 17px）或者百分比的时候，在谷歌浏览器中没有反应。

高度 > 17px

当你设置的负值等于它的相反数的时候，它和父标签或者上一个块级标签的顶部会形成一个17px的间距

当然这个间距可调(最多加上17px，减值随意)，此时的vertical-align的功能就相当于margin-top了。你可以通过调节值来调节上边距。

我们直接给负值设置一个高度的相反数来举个例子：

//行内块标签可用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .bigBox{
            width: 400px;
            height: 400px;
            border: 1px solid #000;
        }
        .smallBox{
            display: inline-block;
            height: 150px;
            width: 150px;
            vertical-align: -150px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="bigBox">
        <span class="smallBox">
        </span>      
    </div>
</body>
</html>

效果如下
效果图
我们将它的负值加上7px，便于大家看清：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .bigBox{
            width: 400px;
            height: 400px;
            border: 1px solid #000;
        }
        .smallBox{
            display: inline-block;
            height: 150px;
            width: 150px;
            vertical-align: -143px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="bigBox">
        <span class="smallBox">
        </span>
        
    </div>
</body>
</html>

这时的效果图为：

此时它与父元素的上面只有10px的间隙了。

高度 < 17px

当你的height小于17px时，这个时候你设置正值才会出现效果，当然它的波动范围在自身宽度与自身宽度 - 17px 之间

我们还是先将负值设为height的相反数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .bigBox{
            width:400px;
            height: 400px;
            border: 1px solid #000;
        }
        .smallBox{
            display: inline-block;
            height: 10px;
            width: 150px;
            vertical-align: -10px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="bigBox">
        <span class="smallBox">
        </span>
        
    </div>
</body>
</html>

效果图为:

我们这个时候将 -10px 改成 5px，没有超过17px对吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .bigBox{
            width: 400px;
            height: 400px;
            border: 1px solid #000;
        }
        .smallBox{
            display: inline-block;
            height: 10px;
            width: 150px;
            vertical-align: 5px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="bigBox">
        <span class="smallBox">
        </span>        
    </div>
</body>
</html>

此时的效果图为：

这个时候它与父元素只有17-10-5=2px的间隙了

正常值的使用

一个忠告
vertical-align在使用时最好的结构是，将所有你需要对齐的行内块元素和行内元素放在一个块级元素中。然后给他们分别添加vertical-align: middle;
记住，一定是所有的行内块元素和行内元素都要加上vertical-align的属性。当然它不影响块级标签的line-height效果
举例啦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .bigBox{
            width: 450px;
            height: 400px;
            line-height: 400px;
            border: 1px solid #000;
            background-color: green;
        }
        img {
            vertical-align: middle;
           
        }
        span{
            border: 1px solid #828282;
            vertical-align: middle;   
        }
    </style>
</head>
<body>
    <div class="bigBox">
        <img src="./img/8.jpg" >
        <span>hello 你好</span>       
    </div>
</body>
</html>

效果图：
在这里插入图片描述
我们可以发现内容在大盒子中间
另外一种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .bigBox{
            width: 450px;
            height: 400px;
            border: 1px solid #000;
            background-color: green;
        }
        img {
            vertical-align: middle;
           
        }
        span{
            border: 1px solid #828282;
            vertical-align: middle;   
        }
    </style>
</head>
<body>
    <div class="bigBox">
        <img src="./img/8.jpg" >
        <span>hello 你好</span>       
    </div>
</body>
</html>

此时效果图为：
在这里插入图片描述
这时我们可以发现两张图片他们的居中是不一样的，上面的加了line-height属性后，img元素以及span 元素都在大盒子中间对齐了，而下面并没有。因此，在我们的日常使用中要将line-height属性和vertical-align属性结合使用，已达到更好的效果!!!

Yannnnnm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css-奇怪的vertical-align属性

vertical-align 基本概念定义vertical-align 属性设置元素的垂直对齐方式。使用场景该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。有负长度值和百分比值。一般用于有图片或者按钮在的地方。一旦你使用了行内块元素，那么line-height属性就很难让图文或者按钮对齐了。所以我们需要vertical-align属性。常用值奇怪的vertical-
复制链接

扫一扫