首页 > 代码库 > 结构-行为-样式-css&html横纵居中最佳实践

结构-行为-样式-css&html横纵居中最佳实践

2024-08-21 08:33:20   217人阅读

最近在做手机端的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;}

 

好了，这应该就是一种我个人用的最多的搞定这种布局的方法了，欢迎留言交流！

 

结构-行为-样式-css&html横纵居中最佳实践


联系
我们