The horizontal line in the middle of the text

Question

I want to display a horizontal line with the words in the middle so that it looks like this:

I am trying to do this and not working:

HTML:

<h2><span>Test</span></h2> 

CSS

 h2{ font-size: 100px; border-top: solid 1px black; width: 100%; height: 50px; margin-top: 25px; top: 50%; z-index: 1; } span{ background: #fff; padding: 0 20px; margin-top:-25px; display: inline-block; z-index: 5; } 

JSFiddle: http://jsfiddle.net/2ds9a/

Answer 1

you can use css :after

like this

HTML

 <h2><span class="line-center">Test</span></h2> 

Css

 .line-center{ margin:0;padding:0 10px; background:#fff; display:inline-block; } h2{ text-align:center; position:relative; z-index:2; } h2:after{ content:""; position:absolute; top:50%; left:0; right:0; border-top:solid 1px red; z-index:-1; } 

Live demo

Answer 2

As shown in this answer (suggested by Quentin ), the following code should work fine for you:

 <div style="height: 2px; background-color: black; text-align: center"> <span style="background-color: white; position: relative; top: -0.5em;"> Section Title </span> </div> 

See this question for more information .

Answer 3

There are different ways to do this, this is my solution:

http://jsfiddle.net/zzLnt/

  <h2><span class="line"></span><span class="text">Test<span></h2> <style> h2{ font-size: 100px; z-index: 1; position: relative; text-align: center; } .line{ background: #000; border-top: solid 1px black; position: absolute; height: 1px; display: block; top: 56px; width: 100%; } .text{ background-color: #FFFFFF; z-index: 20; position: relative; text-align: center; padding: 0 34px; } </style>