Ligne centrée verticalement pour un texte

Question

Dans une boîte de connexion/enregistrement, je dois séparer deux boutons avec un texte comme celui-ci.

Avec mon code HTML être:

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

Comment puis-je obtenir la ligne horizontale pour l'étiquette uniquement avec CSS?

Une solution que j'ai envisagée consiste à utiliser un gradient linéaire de manière appropriée, mais il doit y avoir une manière plus élégante d'y parvenir.

Answer 1

Je suppose qu'il ya un conteneur autour de ces trois balises qui peuvent être coiffés aussi, dans ce cas, je propose this solution.

Markup (non modifié):

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

feuille de style:

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 2

Vous pouvez certainement utiliser 2 divs et le positionnement

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 3

Vous pouvez utiliser la balise <hr /> pour cela. Il est possible de définir l'étiquette <hr /> comme une seule ligne noire. Avec l'utilisation de css, vous pouvez les placer dans la bonne position.

Styling l'étiquette <hr /> comme une ligne noire:

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

Answer 4

En utilisant ceci: http://jsfiddle.net/tErMn/

Vous avez le positionnement de texte dynamique et la ligne avec seulement css. L'astuce est dans display: inline-block;, margin: auto; et 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; 
}