令子元素垂直居中(并且子元素的高度不固定)
父元素规定行高line-height和高度height;子元素使用display:inline-block、vertical-align: middle;
html文件:
<div class="k-mess k-mess-zhai" style="display: block"> <div class="k-left"> <p>王图王宇</p> <p>王图王宇</p> <p>王图王宇</p> </div> <div class="k-right"> <p><span>卧铺</span><span>12车1024上</span></p> <p><span>卧铺</span><span>12车1024上</span></p> <p><span>卧铺</span><span>12车1024上</span></p> </div> </div>
对应的css为:
.k-mess{
float: left;
margin-top: 5px;
padding-top: 5px;
width: 248px;
height: 70px;
line-height: 70px;
margin-left: 60px;
background:url('./i/train_bg.png') no-repeat;
.k-left{
width: 98px;
display: inline-block;
vertical-align: middle;
text-align: center;
p{
height: 20px;
line-height: 20px;
}
}
.k-right{
width:140px;
display: inline-block;
vertical-align: middle;
text-align: center;
p{
height: 20px;
line-height: 20px;
}
}
}