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

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

 

转载于:https://www.cnblogs.com/xiaozhumaopao/p/6092451.html