【css】vertical-align 实现垂直居中

最新推荐文章于 2024-04-19 22:04:59 发布

richest_qi

最新推荐文章于 2024-04-19 22:04:59 发布

阅读量1.7k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qzw752890913/article/details/107544915

版权

css 专栏收录该内容

69 篇文章 4 订阅

订阅专栏

文章目录

基线

把小写字母x的高度记作 x-height，1ex就是1个 x-height。
对于文本等内联元素来说，小写字母 x 的下边缘是基线。
基线往上移 (x-height)/2高度就是 middle。
对于图片等替换元素来说，图片下边缘是基线。

vertical-align

作用在内联元素上

作用在diplay值为inline| inline-block |inline-table 等内联元素上。

baseline
元素基线与父元素基线对齐。
文本的基线在小写字母x的下边缘。
图片的基线在图片的下边缘。
vertical-align的默认值是 baseline，即图片的基线与其父元素基线对齐。

<body>
    <div class="container">
        x<img src="./imgs/email.svg" alt="email">
    </div>   
</body>

在这里插入图片描述

text-top
元素的顶端与父元素字体的顶端对齐

    .container{
        border:1px solid lightskyblue;
    }
    img{
        vertical-align: text-top;
    }

<body>
    <div class="container">
        x<img src="./imgs/email.svg" alt="email">
    </div>   
</body>

在这里插入图片描述

text-bottom
元素的底端与父元素字体的底端对齐

    .container{
        border:1px solid lightskyblue;
    }
    img{
        vertical-align: text-botom;
    }

<body>
    <div class="container">
        x<img src="./imgs/email.svg" alt="email">
    </div>   
</body>

在这里插入图片描述

middle
元素中部与父元素基线往上(x-height)/2的位置对齐。
top
元素及其后代的顶端与整行顶端对齐

    .container{
        border:1px solid lightskyblue;
    }
    span{
        font-size:36px;
    }
    img{
        vertical-align:top;
        /* vertical-align: text-top; */
    }

<body>
    <div class="container">
        x<img src="./imgs/email.svg" alt="email"><span>x</span>
    </div> 
</body>

在这里插入图片描述

bottom
元素及其后代的底端与整行底端对齐

    .container{
        border:1px solid lightskyblue;
    }
    span{
        font-size:36px;
    }
    img{
        vertical-align:bottom;
        /* vertical-align: text-bottom; */
    }

<body>
    <div class="container">
        x<img src="./imgs/email.svg" alt="email"><span>x</span>
    </div> 
</body>

在这里插入图片描述

作用在表格单元格上

作用在diplay值为table-cell 的元素上。

baseline
基线对齐
top
单元格内边距上边缘与该行顶端对齐
bottom
单元格内边距下边缘与该行底端对齐
middle
单元格内边距盒模型 在该行内居中

图片文字中心对齐

        .icon{
            background-repeat:no-repeat;
            display:inline-block;
            width:16px;
            height:16px;
            vertical-align: middle;            
        }
        .icon-down{
            background-image:url(./imgs/icon-chevron-down.png)
        }
        .icon-up{
            background-image:url(./imgs/icon-chevron-up.png);
        }

<body>
    <div>x请选择 <span class="icon icon-down"></span></div>
    <script>
        var span = document.querySelector('span');
        span.onclick = function(){
            if(span.classList.contains('icon-down')) {
                span.classList.remove('icon-down');
                span.classList.add('icon-up');
            }else if(span.classList.contains('icon-up')){
                span.classList.remove('icon-up');
                span.classList.add('icon-down');
            }
        }
    </script>
</body>

vertical-align默认值是baseline，元素基线与其父元素基线对齐，即背景图片的下边缘与文本 “x请选择”中“x”的下边缘对齐。
为了让背景图片与文本“请选择”居中对齐，将背景图片的vertica-align设置为middle。
在这里插入图片描述

块内内联元素的垂直居中

如果内联元素是文本类，要实现垂直居中，line-height就能搞定。

    .box{
        width:200px;
        line-height:100px;
        border:1px solid lightskyblue;
    }

<body>
<div class="box">x
    <span style="background-color:lightgray">这个世界随时都要崩塌</span>
</div>
</body>

在这里插入图片描述
如果内联元素是图片，单靠line-height搞不定！

<body>
<div class="box">x
    <img src="./imgs/email.svg" alt="email">
</div>
</body>

在这里插入图片描述
这时就是vertical-align:middle发挥作用的时候了。

所以要实现块内图片的垂直居中，css样式如下：

    .box{
        width:200px;
        line-height:100px;
        border:1px solid lightskyblue;
        text-align:center;
    }
    img{
        vertical-align:middle;
    }

在这里插入图片描述

块内块级元素的垂直居中

    .box{
        width:200px;
        display: table-cell;
        height: 100px;
        border:1px solid lightskyblue;
        vertical-align: middle;
    }
    .content{
        width:48px;
        height:36px;
        background:url(./imgs/email.svg) center no-repeat;
        margin:0 auto;
    }

<body>
    <div class="box">
        <div class="content"></div>
    </div>
</body>

在这里插入图片描述
当然如果块内是内联元素，display:table-cell+vertical-align:middle也能实现垂直居中。

    .box{
        width:200px;
        display: table-cell;
        height: 100px;
        border:1px solid lightskyblue;
        vertical-align: middle;
        text-align: center;
    }

<body>
    <div class="box">
        <span>这个世界随时都会崩塌</span>
    </div>
</body>

在这里插入图片描述

参考文章

vertical-align

richest_qi

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【css】vertical-align 实现垂直居中

vertical-align，作用在内联元素或表格单元格上，这些元素使用vertical-align来控制自己的垂直对齐方式。vertical-align 有8个属性值。baselinemiddletopbottomtext-toptext-bottomsupersub把小写字母x的高度记作 x-height。小写字母 x 的下边缘就是 baseline，即基线。基线往上移 (x-height)/2高度就是 middle。参考文章vertical-align..
复制链接

扫一扫