CSS关于vertical-aglin为啥老是不起作用。

最新推荐文章于 2024-05-28 12:36:33 发布

weixin_45475924

最新推荐文章于 2024-05-28 12:36:33 发布

阅读量391

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_45475924/article/details/119833931

版权

一开始使用vertical-aglin是在行内文本垂直居中时使用的，但是vertical-aglin也可以使图片垂直居中。但是在使用过程中，发现这个属性的设置经常无法生效。

首先来看定义：CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

注意 vertical-align 只对行内元素、表格单元格元素生效：不能用它垂直对齐块级元素。

所以当使用vertical-align时注意display：inline或是inline-block，table-cell

当设定display：table-cell时，注意父元素设置display：table

<style>
        .box3{
            margin-right: 10px;
            float: left;
            width: 250px;
            height: 400px;
            position: relative;
            background-color: teal;
            line-height: 400px;
        }
        a{
            display: inline-block;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="box3">
        <a href="">
            <span>行内元素居中</span>
        </a>
    </div>
</body>
</html>

显示效果如下父元素不设置行高

weixin_45475924

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS关于vertical-aglin为啥老是不起作用。

一开始使用vertical-aglin是在行内文本垂直居中时使用的，但是vertical-aglin也可以使图片垂直居中。但是在使用过程中，发现这个属性的设置经常无法生效。首先来看定义：CSS的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。注意vertical-align 只对行内元素、表格单元格元素生效：不能用它垂直对齐块级元素。所以当使用vertical-align时注意display：inline或是inli..
复制链接

扫一扫