CSS实战样式：文字两侧加居中横线

CSS实战样式：文字两侧加居中横线

原文：
https://www.freesion.com/article/4444809147/

在日常的开发中，会遇到这样的需求，比如移动web开发中的登录页的底部，会出现这样的需求：其他登录方式，两侧有居中的横线

实现的方案：

（一）使用 vertical-align 属性来实现

原理：利用vertical-align属性设置负值，实现样式；
1.html部分

其他登录方式

1 2 3 4 5 2.css部分

.other-way-login {
height: 30px;
line-height: 30px;
font-size: 24px;
text-align: center;
}
.other-way-login .line {
display: inline-block;
width: 150px;
border: 1px solid black;
}
.other-way-login .txt {
color: black;
vertical-align: middle;
vertical-align: -20%;
margin: 0 30px;
}
1
2
3
4
5
6
7
8
9
10
11