使用css将文字在水平线中显示

00秃头小宝贝

已于 2024-01-24 10:15:03 修改

阅读量646

点赞数 12

文章标签： css 前端

于 2024-01-23 18:03:54 首次发布

本文链接：https://blog.csdn.net/m0_72929120/article/details/135778208

版权

本文介绍了三种不同的方法来设计网页中的第三方登录样式，包括使用HTML和CSS实现的水平线、分割线以及定位居中的标题。详细展示了代码示例和样式调整技巧。

摘要由CSDN通过智能技术生成

方法一：

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.效果图

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.效果图

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;
}