令子元素垂直居中(并且子元素的高度不固定)

父元素规定行高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;
                        }
                    }
                }

 

posted @ 2016-11-23 09:27  小猪冒泡  阅读(313)  评论(0编辑  收藏  举报