css实现文字左右添加横线
方法一、div标签实现
HTML：
<div class="thirdLine"><span class="line"></span><div class="txt"><span>第三方登陆</span></div><span class="line"></span></div>
CSS：
.thirdLine {height: 50px;text-align: center;display: flex;align-items: center;justify-content: center;.line {display: inline-block;width: 110px;height: 1px;background: #e4e7ed;}.txt {color: #bbbbbb;vertical-align: middle;display: flex;flex-direction: column;font-size: 12px;margin: 0 15px;}
}
方法二、fieldset标签实现
HTML：
<fieldset><legend>第三方登陆</legend></fieldset>
CSS：
fieldset{border: none;margin-top: 20px;border-top: 1px solid transparent;//这里我用的纯灰色的，想要渐变色可以改成两个色值实现border-image: -webkit-radial-gradient(#E4E7ED,#E4E7ED) 1 10;
}
legend{font-size: 12px;text-align: center;padding: 0 10px;color: #bbbbbb;
}
方法三：element组件实现
HTML：
<el-divider>第三方登陆</el-divider>
CSS：
.el-divider--horizontal{margin: 26px 0 !important;.el-divider__text{color: #bbbbbb;font-size: 12px;}
}
以上方法最终效果如图：
