Vertically centered line for text

Question

In the registration / registration window, I need to separate two buttons with text like this.

With my HTML code:

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

How to get horizontal line for label using CSS only?

One solution that I reviewed is to use a linear gradient appropriately, but this requires a more elegant way.

Answer 1

I assume that there is a container around these three tags that can also be styled, in which case I offer this solution .

Markup (unchanged):

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

Style sheet:

 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

You can use 2 divs and positioning

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

You can use the <hr /> tag for this. You can mark the <hr /> as one black line. With css you can put them in the right position.

Stacking the <hr /> as a black line:

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

Answer 4

Using this: http://jsfiddle.net/tErMn/

You have dynamic text positioning and a line with CSS.

The trick is in display: inline-block; , margin: auto; and 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; }