绝对定位多个字居中显示的css

蓓蕾心晴

发布于 2018-04-12 06:30:02

1.6K00

代码可运行

文章被收录于专栏：前端小叙前端小叙

运行总次数：0

代码可运行

在工作中遇到一种情况，例如把一个div元素绝对定位到一个位置，但是该元素中的文字个数不确定，还要保证始终该文字是居中显示，则可以定义两个div,外层div绝对定位并加一个宽度，内层div居中

.box03 .percent {
            position: absolute;
            right: 31%;
            top: 12%;
            width: 100px;
            font-family: arial;
            font-weight: bold;
            color: #e83522;
            font-size: 1rem;
        }
        .box03 .percent span{
            display: inline-block;
            text-align: center;
            width: 100%;
        }