line-height和vertical-align：middle的作用对象与参照对象区别

最新推荐文章于 2021-12-26 20:54:30 发布

万迹

最新推荐文章于 2021-12-26 20:54:30 发布

阅读量263

点赞数 1

分类专栏：前端基础

本文链接：https://blog.csdn.net/weixin_44649210/article/details/119705158

版权

前端基础专栏收录该内容

13 篇文章 1 订阅

订阅专栏

vertical—align：middle

这个属性常用于与图片垂直对齐的文字。它作用于行内标签

//css代码
        #imge{
            display: inline-block;
            width: 100px;
            height: 100px;
            background: url("pc/bjth/img/bjth_06.jpg") no-repeat center;
            vertical-align: middle;
            background-color: aquamarine;
        }
        #decation{
            display: inline-block;
            width: 30px;
            height: 30px;
            vertical-align: middle;
            background-color: aqua;
        }
//html代码
		<span id="imge"></span>
        <span id="decation">456</span>

运行结果：
在这里插入图片描述
如果将它们中任一个的vertical-align: middle;删除掉，则无法对齐

//css代码
        #imge{
            display: inline-block;
            width: 100px;
            height: 100px;
            background: url("pc/bjth/img/bjth_06.jpg") no-repeat center;
            background-color: aquamarine;
        }
        #decation{
            display: inline-block;
            width: 30px;
            height: 30px;
            vertical-align: middle;
            background-color: aqua;
        }
//html代码
		<span id="imge"></span>
        <span id="decation">456</span>

运行结果：
在这里插入图片描述
由此就可以知道，当两个行内元素都拥有这个属性时，才能让他们互相参照居中。

line-height

只能对自己单行文本子元素垂直居中

<style type="text/css">
    .father{
        width: 300px;
        height: 300px;
        background-color: aquamarine;
        line-height: 300px;
    }
    .father>div{
        height: 30px;
        width: 30px;
        background-color: bisque;
    }
</style>
<body>
    <div class="father">
        <span>123</span>
    </div>
</body>

在这里插入图片描述

万迹

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
line-height和vertical-align：middle的作用对象与参照对象区别

vertical—align：middle这个属性常用于与图片垂直对齐的文字。它作用于行内标签，使得行内标签里面的文字垂直对齐。注意只能作用于行内元素，放在块级元素里面会失效//css代码 #decation{ display: inline-block; width: 100px; height: 100px; vertical-align: middle; }//html
复制链接

扫一扫