• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

CSS，中间文字 两边横线 CSS样式写法_CSS学习

当前位置：网站建设 > 技术支持

在项目中遇到过中间文字，两边横线的布局，如下图：

两边横线我们可以使用标签的上边框或者下边框，然后对中间的文字使用 vertical-align 属性来控制。

<div class="order">  
   <span style="white-space:pre">   </span><span class="line"></span>  
   <span style="white-space:pre">   </span><span class="txt">产品清单</span>  
   <span style="white-space:pre">   </span><span class="line"></span>  
</div>

css

.order {  
   height: 60px;  
   line-height: 60px;  
   text-align: center;  
}  
 .order .line {  
   display: inline-block;  
   width: 150px;  
   border-top: 1px solid #ccc ;  
}  
.order .txt {  
   color: #686868;  
   vertical-align: middle;  
}

在css样式中使用 vertical-align: middle，然后就发现跟UI图有一点点区别，横线没有完全在文字的中间

查找 vertical-align 的属性就会发现有length 和 % 两个属性

然后尝试使用 % 看看能不能让横线在文字的中间，通过调整 css 样式

<span style="white-space:pre">  </span><span style="font-family: Arial, Helvetica, sans-serif;">vertical-align: -8%;</span>

发现横线在文字的中间，那么 length 长度属性是否也可以呢？试一试发现也是可以的

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。