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

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; }

（五）背景图填充

• 原理：使用背景图实现横线居中效果

• 局限：颜色一致性的问题

• 解决：就看你如何与UI小姐姐如何沟通了，只能帮你到这里了！！！

综合选择

• 代码量，个人习惯，样式复杂程度，实际的具体需求等方面进行选择；

• 以上方法只是一部分，还有其他的方法，需要你自己去发现喽！！！