css - 文本的垂直居中线

Question

在登录/注册框中，我必须用这样的文本分隔两个按钮。

我的 HTML 代码是：

<button class="facebookSux">Ingresa con Facebook</button>
<label>o si prefieres</label>
<button class="register">Regístrate con tus datos</button>

如何仅使用 CSS 获得标签的水平线？

我考虑过的一种解决方案是适当地使用线性渐变，但必须有一种更优雅的方式来实现这一点。

Answer 1

您当然可以使用 2 个 div 和定位

演示

HTML

<div class="wrapper">
   <div class="line"></div>
   <div class="text">Hello</div>
</div>

CSS

.wrapper {
    margin: 30px;
    position: relative;
    width: 300px;
}

.line {
    height: 1px;
    background-color: #000000;
}

.text {
    background: #ffffff;
    display: inline-block;
    position: absolute;
    top: -15px;
    left: 128px;
    padding: 5px;
}

Answer 2

我假设这三个标签周围有一个容器也可以设置样式，在这种情况下，我提出了这个解决方案。

标记（未更改）：

<div>
    <button>Ingresa con Facebook</button>
    <label>o si prefieres</label>
    <button>Regístrate con tus datos</button>
</div>

样式表：

div {
    width: 250px;
    text-align: center;
    overflow: hidden;
}
button {
    width: 100%;
}
label {
    padding: 0 1em;
    position: relative;
}
label::before,
label::after {
    width: 125px; /* =250/2 */
    height: 0;
    border-top: 1px solid #000;
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 100%;
}
label::after {
    left: 100%;
}

Answer 3

您可以<hr />为此使用标签。可以将<hr />标签设置为一条黑线。通过使用 css，您可以将它们放置在正确的位置。

将标签样式设置<hr />为黑线：

hr {
        border: 1px; 
        height: 1px; 
        color: #000000;
        background-color: #000000;
}

Answer 4

使用这个：http: //jsfiddle.net/tErMn/

您只有动态文本定位和带有 css 的行。

诀窍在于display: inline-block;,margin: auto;和z-index;

HTML

<div class="container">    
    <div class="text">Hello</div>
    <div class="line"></div>
</div>

CSS

.container{
    width: 300px;
    text-align: center;
}

.text{
    background-color: white;
    padding: 5px 20px;
    position: relative;
    z-index:1;
    margin: auto;
    display: inline-block;

}

.line {
    height: 1px;
    width: 100%;
    background-color: black;
    margin-top: -15px;
}