div文字居中

最新推荐文章于 2025-06-06 22:51:36 发布

原创最新推荐文章于 2025-06-06 22:51:36 发布 · 2.5k 阅读

1 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

10 篇文章

订阅专栏

1.文字垂直居中

<div>要垂直居中的文字</div>

div{height:50px;line-height:50px;}

2.背景图片大小自适应

div{

    background: url("../s-bg1.png") no-repeat;background-size:contain;

}

3.背景图片，文字自适应居中

<div class="row">
        <div class="service-bg service-bg1 col-lg-3 col-md-3 col-xs-3">
            <div class="s-content">已受理</div>
        </div>
        <div class="service-bg service-bg2 col-lg-3 col-md-3 col-xs-3">
            <div class="s-content">工程师正在处理您的问题</div>
        </div>
        <div class="service-bg service-bg3 col-lg-3 col-md-3 col-xs-3">
            <div class="s-content">待您确认处理结果</div>
        </div>
        <div class="service-bg service-bg3 col-lg-3 col-md-3 col-xs-3">
            <div class="s-content">待您评价</div>
        </div>
    </div>

css代码：

.service-bg{height:50px;display:table;position:relative;text-align: center;color:#fff;}
.service-bg1{background: url("../img/service/s-bg1.png") no-repeat;background-size:100% 100%;}
.service-bg2{margin-left:-30px;background: url("../img/service/s-bg2.png") no-repeat;background-size:100% 100%;}
.service-bg3{margin-left:-30px;background: url("../img/service/s-bg3.png") no-repeat;background-size:100% 100%;}
.s-content{display:table-cell;top:45%;vertical-align:middle;}