关于网页布局中标题文字压线居中的安全方法

如图所示，文字压线居中显示

html代码：

    
    分享
 

css代码：

.share-title{
    width: 1000px;
    margin: 0 auto;
    text-align: center;
    background: #fff;
    position: relative;
}
.share-title__line{
    position: absolute;
    top: 50%;
    left:0;
    right:0;
    height: 1px;
    background: #bce0ff;
}
.share-title__text{
    font-size: 18px;
    color: #9bd0ff;
    position: relative;
    padding: 0 20px;
    background: #fff;
}

如果两侧有带修饰符，只需在

    
    
        
        分享
        
    

CSS代码：

.part-title__line-dot{
    position: absolute;
    top: 20px;
    background: url("../img/line-dot.png") no-repeat;
    height: 7px;
    width: 8px;
    z-index: 2;
}
.left-dot{
    left: 0;
}
.right-dot{
    right: 0;
}

效果如图：