css⽂字的垂直居中,absolute布局
俺也不知道，这看似很简单的命题实现起来有点复杂?
为什么我总需要百度来解决?
需要实现的效果就如上图, 如果只是简简单单的⼀个⽂字垂直居中(谁不会呀!!)
然⽽设计师⾮要加个装饰图在后⾯. emmm 那不就意味着要⽤z-index，那不就要⽤position: absolute;
或者我应该研究研究怎么把背景图⽚显⽰成这样?
先要有⼀个div将图⽚和⽂字包括在⾥⾯, div的⾼和图⽚⾼⼀样, 然后⽂字才能在图⽚上垂直居中.
好了，我让图⽚position: absolute; 之后, margin: 0 auto; 也不好⽤了! 好⽓.
那怎么居中呢. ⾸先我要确定好图⽚的⾼⼤概是25vh，然后通过⽐例推算出宽44.3vh. 嗯然后左右的padd
ing也可以算出来了, padding: 0 calc((100% - 44.3vh)/2);
然后是⽂字, 给⽂字设定⼀个⾏⾼ line-height, ⾏⾼不影响字体⼤⼩.
我这⾥设了5vh, 外⾯的div 设成25vh, 算出padding-top: 10vh;
⽔平居中直接⽤text-align:center; 但⼀定要设定width: 100%;
上代码:
html:
<div class="toptitle">
div中的div居中<img src="images/圆圈装饰.png" alt="">
<div class="chuizhijuzhong">
Thank you for choosing Flover</div></div>
css
.
toptitle{
padding: 6.7em 0 0;
height: 25vh;
/*line-height: 25vh;*/
}
.toptitle img{
position:absolute;
z-index: 0;
height: 25vh;
display: block;
width: 44.3vh;
padding: 0 calc((100% - 44.3vh)/2);
}
.chuizhijuzhong{
position: absolute;
padding-top:10vh ;
/*vertical-align:middle;*/
/*display: inline-block;*/
/*height: 5vh;*/
line-height: 5vh;
font-size:58px;
text-align: center;
font-weight: 200;
width:100%;
font-family:'Montserrat';
}
反思: 原来不⽤z-index, 只⽤调整控件在html中的先后位置就好了.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。