两边横线大家可以使用标签的上边框或者下边框，然后对中间的文字使用vertical-align 属性来控制。
<divclass="order"><spanstyle="white-space:pre"></span><spanclass="line"></span><spanstyle="white-space:pre"></span><spanclass="txt">产品清单</span><spanstyle="white-space:pre"></span><spanclass="line"></span></div>
css
.order{height:60px;line-height:60px;text-align:center;}.order.line{display:inline-block;width:150px;border-top:1pxsolid#ccc;}.order.txt{color:#686868;vertical-align:middle;}
在css样式中使用 vertical-align: middle，然后就发现跟UI图有一点点区别，横线没有完全在文字的中间
查找 vertical-align 的属性就会发现有length 和 % 两个属性
然后尝试使用 % 看看能不能让横线在文字的中间，通过调整 css 样式
<spanstyle="white-space:pre"></span><spanstyle="font-family:Arial,Helvetica,sans-serif;">vertical-align:-8%;</span>
发现横线在文字的中间，那么 length 长度属性是否也可以呢？试一试发现也是可以的
如果觉得《CSS 中间文字 两边横线 CSS样式写法 – CSS – 前端 css3 触发 动画》对你有帮助，请点赞、收藏，并留下你的观点哦！
