版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u014744118/article/details/79528252
一、原理:利用
vertical-align
属性设置负值,实现样式;1.html部分
<div class="other-way-login">
<span class="line"></span>
<span class="txt">其他登录方式</span>
<span class="line"></span>
</div>
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;
}
二、一个div搞定
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div class="searchEnd" style="height:1px;border-left:300px solid #ccc;border-right:300px solid #ccc;width:120px;line-height:1px;text-align:center;color:#aaa;margin:auto;font-size:12px;font-weight:600">我是有底线的</div>
</html>