【前端开发之CSS】不同情况的文字垂直居中实现

最新推荐文章于 2023-02-13 10:53:40 发布

OrangeMonsterMM

最新推荐文章于 2023-02-13 10:53:40 发布

阅读量223

点赞数

分类专栏：前端CSS 文章标签： css

本文链接：https://blog.csdn.net/Sxiaofang/article/details/116032396

版权

前端CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文讲解了如何在父元素高度不确定时，通过使用伪元素和`line-height`实现文字垂直居中。首先介绍了固定高度的`<header>`下设置line-height的方法，然后详细阐述了当父元素高度为百分比时，如何利用`.container-left`中的伪元素`::before`来确保文字居中显示。

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

1. 文字用span标签，当父元素高度一定时，则将文字的line-height设置为父元素高度即可；

.header {
    width: 100%;
    height: 50px;
    border: 1px solid #000;
    .header-span {
        font-size: 1em;
        font-weight: bold;
        line-height: 50px;
    }
}

2. 当父元素高度不一定时（用百分比表示的），则需要利用伪元素设置居中，代码如下：

.container-left {
        background: #fff;
        border: 1px solid #000;
        width: 80px;
        height: 100%;
        .left-span {
            font-size: 1em;
            font-weight: bold;
            height: 50%
        }
        .left-span::before {
            height: 100%;
            vertical-align: middle;
            display: inline-block;
            content:"";
        }
    }