vertical-align无效解决方法

首先奉上html结构


    <div class="desc">
        <div class="mid-con">
             <p class="text">Hello Wrold</p>
         </div>
         <i class="mid-i"></i>
    </div>                      



好好理解vertical-align

要用这个属性实现垂直居中,其实核心就在于这个需要一个满行高的行内元素来作为参考。在设置了vertical-align: middle的元素的同级元素内添加一个行高为父元素满高度的行内元素(如i),则可以实现。
PS:vertical-align是元素自我属性,不是控制子元素的,也不能继承,要使p元素垂直居中,应当写在p元素的样式上。


接下来css


.desc{

white-space:nowrap;

}

.mid-con{
    white-space: normal;
    width: 100%;
    display: inline-block;
    vertical-align: middle;
}
.text{
  
    vertical-align: middle;
    
}
.mid-i{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}




展开阅读全文

没有更多推荐了,返回首页