方法一：
1.效果图
2.html
<!-- <div class="line">
第三方登录
</div> -->3.css
/* 让文字在水平线中显示 */
.line {
display: flex;
flex-direction: row;
color: #ccc;
font-size: 18px;
font-weight: bolder;
}
.line:before,
.line:after {
content: "";
flex: 0.8 0.8;
border-bottom: 2px solid #ccc;
margin: auto;
}方法二
1.效果图
文章来源：https://www.toymoban.com/news/detail-820566.html
2.html
<div class="divider">
<p></p>
<div class="divider-text">申请处理进度</div>
<p></p>
</div>3.css
.divider{
width: 100%;
display: flex;
p{
width: 48%;
height: 1px;
border-top: 1px orange dashed;
margin: 0;
vertical-align: middle;
}
.divider-text{
padding: 0 20px;
color: orange;
transform: translateY(-50%);
display: inline-block;
font-size: 17px;
}
}方法三
1.效果图
文章来源地址https://www.toymoban.com/news/detail-820566.html
2.html
<div class="line">
</div>
<h3>第三方登录</h3>3.css
.line{
width: 330px;
height: 1px;
border-top: 1px solid #a9aaa8;
margin: 0 auto;
margin-top: 50px;
}
h3{
width: 100px;
text-align: center;
/* 关键点,利用定位让文字居中 */
position: relative;
margin: 0 auto;
bottom: 14px;
background-color: white;
color: #a9aaa8;
}到了这里，关于使用css将文字在水平线中显示的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
