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 文字垂直居中自适应 - 代码篇" 的全部内容。

CSS 文字垂直居中自适应 - 代码篇相关推荐

java文本框字体垂直居中_实现css文字垂直居中的8种方法
注:以下demo都只是针对现代浏览器所做,未兼容低版本的IE以及其他非主流浏览器. 实现css文字垂直居中的8种方法如下: 1.使用绝对定位和负外边距对块级元素进行垂直居中 css垂直居中效果: cs ...
实现css文字垂直居中的8种方法
CSS可以轻易实现文字的水平居中,但有时我们需要文字垂直居中,除了表格可以实现这种CSS文字垂直居中以外,还有其它几种方法可以做到 https://www.jb51.net/article/17825 ...
CSS文字颜色渐变 - 案例篇
(含效果图.代码)css3 文字颜色渐变 - 案例篇效果图: demo 代码如下: <doctype HTML!> <html> <head><title& ...
文字竖直居中 html,CSS 文字垂直居中
1.高度为百分比,line-height 不知道设置具体的数值的情况,利用伪元素进行居中 HTML 这是要居中的文字 CSS 给要居中元素设置一个伪元素 .son{ height: 50%; back ...
css图片垂直居中自适应
我们在应用图片的时候经常会碰到要让图片在容器里居中的情况,水平居中很简单直接给容器添加text-align: center;就ok了.那么垂直居中呢?是不是给img加vertical-align: m ...
css 文字垂直居中
css样式中提供了text-align=center 实现的是水平居中,但没有提供直接的垂直居中,具体原因不得而知,实现方式可以通过设置行高=盒子的高度,原因很好理解,行高= 上缝隙+文字高度+下缝隙 ...
css文字大小自适应
总结了一下一些单位的不同 px:像素(pixel)相对长度单位,,是相对于屏幕显示器分辨率而言的: em:em的值并不是固定的,会集成父级元素的字体大小: 注意: 1.body选择其中声明Font-s ...
【CSS】CSS元素显示模式display + 网页单行文字垂直居中小技巧
写在前面,作者首页有前端专栏,详细分享相关知识,有兴趣的不妨点个收藏 ~~~~ CSS元素显示模式display 标签显示模式是标签以什么方式进行显示.HTML标签一般分为块标签和行内标签两种类型,它 ...
div css将文字居中显示图片,css文字居中、图片居中、div居中解决方案
一.文字居中若文字只有一行文本只有一行 .box { width: 200px; height: 200px; background-color: red; } .text { line-heig ...

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

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

引言

效果图：

解决办法 · 代码示下：

CSS 文字垂直居中自适应 - 代码篇相关推荐

最新文章

热门文章