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

最新推荐文章于 2024-01-18 10:56:03 发布

fullstack_lth

最新推荐文章于 2024-01-18 10:56:03 发布

阅读量627

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/u014744118/article/details/79528252

版权

JavaScript 专栏收录该内容

51 篇文章 1 订阅

订阅专栏

一、原理：利用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>

fullstack_lth

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS（二十八）居中横线-其他登陆方式或者数据加载完成

一、原理：利用vertical-align属性设置负值，实现样式；1.html部分&lt;div class="other-way-login"&gt; &lt;span class="line"&gt;&lt;/span&gt; &lt;span class="txt"&gt;其他登录方式&lt;/span&gt; &lt;sp
复制链接

扫一扫