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

转载于 2016-11-23 09:27:00 发布 · 105 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaozhumaopao/p/6092451.html

本文介绍了一种利用CSS实现水平垂直居中的方法，通过设置父元素的行高和高度，并结合子元素的display:inline-block及vertical-align:middle属性来实现。适用于需要精确控制元素位置的网页布局场景。

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