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

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

fullstack_lth

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

阅读量660

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/u014744118/article/details/79528252

JavaScript 专栏收录该内容

51 篇文章

订阅专栏

本文介绍了一种使用CSS的vertical-align属性来实现文字与其他元素垂直居中的方法，并展示了一个仅用一个div元素完成类似布局效果的例子。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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