JS(二十八)居中横线-其他登陆方式或者数据加载完成

版权声明:本文为博主原创文章,未经博主允许不得转载。 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>  

猜你喜欢

转载自blog.csdn.net/u014744118/article/details/79528252