vertical-align无效解决方法

首先奉上html结构

    

        

             

Hello Wrold

        

        
    

                      

好好理解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;
}