div模块边框中间添加文字（边框线在文字两边横穿文字）

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值 调整边框线在文字中部
}