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

最新推荐文章于 2024-04-13 00:15:00 发布

Bumphy

最新推荐文章于 2024-04-13 00:15:00 发布

阅读量1w

点赞数 5

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/Bumphy/article/details/78319678

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

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

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

实现的方案：

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

原理：利用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;
}

优点：背景颜色

（二）使用定位属性来实现

原理：使用定位属性进行实现
缺点：需要调整，扩展性低，效率低；背景颜色需要单独设置；

1.html部分

<div class="other-way-login">
    <span class="line"></span>
    <span class="txt">其他登录方式</span>
</div>

2.css部分

.other-way-login {
    background-color: rgb(134, 213, 233);
    width: 600px;
    height: 300px;
    margin: 100px auto;
    font-size: 24px;
    overflow: hidden;
    position: relative;
}
.line {
    position: relative;
    width: 100%;
    height: 0px;
    display: block;
    border:1px solid black;
    margin-top:50px;
}
.txt {
    background: rgb(134, 213, 233);
    position:absolute;
    left:230px;
    top:35px;
}

（三）使用伪元素来实现

原理：利用伪元素进行定位，样式拼接；

1.html部分

<div class="other-way-login">
    <h2 class="wrap">
        <span class="title">其他登录方式</span>
    </h2>
</div>

2.css部分

.other-way-login {
    width: 700px;
    height: 200px;
    margin: 0 auto;
    position: relative;
    background: rgb(78, 210, 228);
}
.wrap {
    position: absolute;
    top: 0px;
    left: 50%;
    width: 700px;
    margin-left: -350px;
    /* 左外边距宽度的一半，50% */
    text-align: center;
}
/*伪元素实现*/
.title:before {
    display: inline-block;
    position: relative;
    top: -7px;
    right: 20px;
    content: "";
    width: 200px;
    height: 0px;
    border: 1px solid #000;
}
.title:after {
    display: inline-block;
    position: relative;
    top: -7px;
    left: 20px;
    content: "";
    width: 200px;
    height: 0px;
    border: 1px solid #000;
}

（四）使用浮动属性实现

原理：块级元素的浮动属性float效果，实现相应的样式；

1.html部分

<div class="wrap">
    <span class="line"></span>
    <span>其他登录方式</span>
    <span class="line"></span>
</div>

2.css部分

* {
    margin: 0px;
    padding: 0px;
}
.wrap {
    width: 600px;
    margin: 200px auto;
    overflow: hidden;
    position: relative;
}
.wrap span {
    float: left;
    font-size: 28px;
    text-align: center;
    width: 33.3%;
}
.wrap .line {
    border-bottom: 1px solid black;
    height: 12px;
}