.box可设置height、line-height .text可设置margin
上下居中可使用vertical-align:middle;或justify-content:center;
左右居中可使用text-align:center;
自适应宽度可使用width+float或flex-grow
一、使用<hr>
<div class="box">
<hr class="line">我是文字<hr class="line">
</div>
.line{
display:inline-block;
}
二、三个<span>
<div class="box">
<span class="line"></span>
<span class="text">我是文字</span>
<span class="line"></span>
</div>
.line{
display:inline-block;
border-top:1px solid #000;
}
flex实现(推荐),可自适应。
.box{
display:flex;
align-items:center;
}
.line{
border-top:1px solid #000;
flex-grow:1;
}
.text{
margin:0 10px;
}
三、一个<span>(推荐)
可自适应。
<div class="line">
<span class="text">我是文字</span>
</div>
.line{
height:0;
border-top:1px solid #000;
text-align:center;
}
.text{
position:relative;
top:-14px;
background-color:#fff;
}
四、单标签+line-height
<div class="line">我是文字</div>
.line{
line-height:1px;
border-left:200px solid #000;
border-right:200px solid #000;
text-align:center;
}