CSS提供了在网页中间制作包含文字或图像的水平线以使其具有吸引力的功能，这可以通过使用简单的CSS属性来实现。
语法：
示例1：将文字显示在水平线中间
效果图：
示例2：将图像显示在水平线中间
效果图：
本文参考地址： https://www.html.cn/qa/css3/10295.html
预览： <div class="sigma-content"><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
}
<div class="line_01">小小分隔线 单标签实现</div>
.demo_line_01{padding: 0 20px 0
margin: 20px 0
line-height: 1px
border-left: 200px solid #ddd
border-right: 200px solid #ddd
text-align: center
<div class="line_02"><span>小小分隔线 巧用色实现</span></div>
.demo_line_02{height: 1px
border-top: 1px solid #ddd
text-align: center
}
.demo_line_02 span{
position: relative
top: -8px
background: #fff
padding: 0 20px
}
<div class="line_03"><b></b><span>小小分隔线 inline-block实现</span><b></b></div>
.demo_line_03{width:600px
}
.demo_line_03 b{
background: #ddd
margin-top: 4px
display: inline-block
width: 180px
height: 1px
_overflow: hidden
vertical-align: middle
}
.demo_line_03 span{
display: inline-block
width: 220px
vertical-align: middle
}
