div模块边框中间添加文字(边框线在文字两边横穿文字)
需求图如下:
其他三个边框可通过设置border完成,包含文字的一边可以分布实现:左边线 + 文字 + 右边线
html:
<div class="pop">
<div class="pop_title">
<span class="line_left"></span>
<span class="title">控制器主网络配置</span>
<span class="line_right"></span>
</div>
<div>
.... //框内内容
</div>
</div>
css:
.pop{
border: 1px #bebebe solid;
border-top-width: 0px;
}
.pop_title {
height: 45px;
text-align: center;
margin-top: -13px; //由于标题在整个pop内,所以需要设置向上位置,使标题上的线和pop的边框对齐
}
.pop_title .line_left {
display: inline-block;
width: 10px;
border-top: 1px solid #ccc ;
}
.pop_title .line_right {
display: inline-block;
width: calc(100% - 70px);
border-top: 1px solid #ccc ;
}
.pop_title .title{
color: #000;
vertical-align: middle; //此处也可根据情况设置为 百分数或px值 调整边框线在文字中部
}