css - テキストの垂直方向の中央の線

Question

ログイン/登録ボックスで、このようなテキストで2つのボタンを区切る必要があります。

私のHTMLコードは次のとおりです。

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

CSSのみでラベルの水平線を取得するにはどうすればよいですか？

私が検討した解決策の1つは、線形グラデーションを適切に使用することですが、これを実現するには、より洗練された方法が必要です。

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

これらの3つのタグの周りにもスタイルを設定できるコンテナがあると思います。その場合、このソリューションを提案します。

マークアップ（変更なし）：

<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 />タグを1本の黒い線としてスタイル設定することができます。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;
}