CSS属性:vertical-align:middle,设置为什么无效!


 

 

 

 

 

 

这是为什么呢!所以查找了许多资料,原来vertical-align属性只对行内元素有效,对块内元素无效!而此时就会用到display属性,大家也看到我里面有设置display属性为inline-block属性,确没有效果,那是因为将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内!说的通俗点,就是你设置的当前div属性还是块对象呈递,但是允许同一级别的div在同一行内,也可以设置宽度和高度!所以才会呈现如上图二所示的没有效果!

解决办法:

可以在.header_3增加一个伪元素,
.header_3:after{
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }

 

1.而如果我们将display属性设置为table-cell,将块元素转化为单元格,然后加上vertical-align:middle,就可以了呈现图三的效果了。(温馨提示:但是你们别忘记加text—align属性为center哟!)、

2.或者可以设置行高即line-height,但是要注意,要与div的高度一致!否则也会有偏差的(温馨提示:而display:inline-block是这个)!


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM