CSS 文字垂直居中自适应 - 代码篇

CSS 文字垂直居中自适应 - 代码篇

---

引言

<div>内的文字能在图片缩放的同时，自动居中（自适应居中），详情看下列代码。

效果图：

---

解决办法 · 代码示下：

/*CSS代码*/
.h3{position: absolute;top:0;left:0;width:100%;height:100%;font-size: 14px;font-weight: bold;text-align: center;background: rgba(0,0,0,.2);margin: 0;}
.h3::before{
    display: inline-block;
    content: "";
    height: 100%;
    vertical-align: middle;
}

<li class="mui-table-view-cell mui-media mui-col-xs-6">
   <div  class="div-a-href">
        <div style="position: relative;">
        	<img class="mui-media-object" src="statics/images/demo.jpg">
        	<h3 class="h3"><span class="mui-badge bg000">二手车鉴定评估培训</span></h3>
        </div>
        <div class="chat-link">
        	<a class="mui-pull-left mui-btn mui-btn-danger" href="">报名流程</a>
        	<a class="mui-pull-right mui-btn mui-btn-danger mui-btn-outlined" href="">咨询价格</a>
        </div>
    </div>
</li>

---

以上就是关于"CSS 文字垂直居中自适应 - 代码篇" 的全部内容。