CSS 设置了line-height等于行高之后文字未垂直居中

最新推荐文章于 2024-01-15 15:47:03 发布

三月，

最新推荐文章于 2024-01-15 15:47:03 发布

阅读量1.6k

点赞数 2

文章标签： css

本文链接：https://blog.csdn.net/weixin_44879122/article/details/115435202

版权

当设置line-height等于高度后，文字未垂直居中。原因是box-sizing: border-box导致height包含padding和border。解决办法是将line-height设置为原始height减去padding和border的值。

摘要由CSDN通过智能技术生成

    <style>
        .box {
   
            /* box-sizing 属性是防止盒子由于边框和内边距被撑大 */
            box-sizing: border-box;  
            width: 100px;
            height: 100px;
            background-color: pink;
            border: 10px solid skyblue;