垂直居中的文本行

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和定位

Demo

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

我假设这三个标签周围有一个容器也可以设置样式，在这种情况下我提议 this solution 。

标记（未改变）：

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