<div class="sigma-middle-line">
<span class="sigma-line-text">Sigma 的中横线</span>
</div>
</div> .sigma-content{
margin: 50px
text-align: center
background-color: #fff
}
.sigma-middle-line:before{
content: ''
display: block
height: 1px
width: 100%
background-color: #999/*颜色需与主题大背景色一致*/
position: relative
top: 10px/*调节线高*/
left: 0
}
.sigma-line-text{
display: inline-block
background: #fff
padding: 0 18px 0 18px
position: relative
font-size: 14px
font-weight: 500
}
如何使用CSS将文字显示在水平线中间？下面本篇文章就来给大家介绍使用CSS实现文字显示在水平线中间效果的方法，希望对大家有所帮助。
CSS提供了在网页中间制作包含文字或图像的水平线以使其具有吸引力的功能，这可以通过使用简单的CSS属性来实现。
语法：
示例1：将文字显示在水平线中间
效果图：
示例2：将图像显示在水平线中间
效果图：
本文参考地址： https://www.html.cn/qa/css3/10295.html
