'How to make some text between two lines?

Hi I have some text and a line.

I need to make the picture look like this:

In my HTML code it looks like this:

<div class="container">
    <div class="line"></div> 
        <h2>Some Text!!!</h2>
    <div class="line"></div>
</div>

css:

.container {
    text-align: center; 
}

.line {
    height: 5px;
    background: #FFEE90;
}

What should I write to place my text between the lines?

htmlcss


Solution 1:[1]

Try this (using one line and relative position on h2 element):

jsfiddle.net/td8L8/

Solution 2:[2]

You could achieve this with several ways.

You could add content line with before and after pseudo elements 

p:before {
    content: "_____";
    color: blue;
    position: absolute;
    top: -5px;
    left: -45px;
}

p:after {
    content: "_____";
    color: blue;
    position: absolute;
    top: -5px;
    right: -45px;
}

An example : http://jsfiddle.net/82EvC/

Another way could be with border lines 

p:before {
    content: "";
    border: 1px solid blue;
    position: absolute;
    width: 50%;
    top: 8px;
    left: -45px;
}

p:after {
    content: "";
    border: 1px solid blue;
    width: 50%;
    position: absolute;
    top: 8px;
    right: -45px;
}

an example: http://jsfiddle.net/82EvC/1/

Solution 3:[3]

Try this. Full width line and some html.

DEMO

<div class="line"><span>Some text</span></div>


.line {
  position: relative;
  text-align: center;
}
.line:after {
  content: "";
  border-bottom: 1px solid #ccc;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: 100%;
  z-index: -1;
}
.line span {
  padding: 0 8px;
  background-color: white;
  position: relative;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 luke
Solution 2 Vangel Tzo
Solution 3 Jeyarathnem Jeyachanthuru

Related Questions