标签：今天 前端 设置 实现 定位 水平 pad .com idt
最近在做手机端的H5项目，有个标题是在一根横线中的，就是水平居中加垂直居中（如图一）。这应该是前端开发中经常遇到的一个场景了，做的次数多了就有一些体会，我今天就总结了下这种结构的实现思路：首先，用元素的Border来做这根线；然后，线与文字在同一个父级元素下；最后，设置线为绝定位，文字相对定位，设置文字高度为线Margin值的两倍；
图一：
相应Html：
<div> <div class="top-line"></div> <div class="top-zone"> <div class="zone-title">精选留言</div> </div> </div>
相应Css：
.comment .top-zone{padding:0 5%;height:90px;text-align:center;position:relative;} .comment .top-line{width:92%;margin:0 4%;border-top:2px solid #ddd;margin-top:45px;position:absolute;display:inline-block;} .comment .top-zone .zone-title{display:inline-block;width:70px;padding:3px 15px;margin-top:31px;background-color:#f3f3f3;color:#666;}
好了，这应该就是一种我个人用的最多的搞定这种布局的方法了，欢迎留言交流！
标签：今天 前端 设置 实现 定位 水平 pad .com idt
原文地址：http://www.cnblogs.com/BigUncleTang/p/6071640.html
