Why I can’t set vertical-align middle for hr tag

I have title in h2, left and right is defined hr.
I can’t position hr to be towards the middle of h2.
On JSfiddle looks good, but in my case looks like this
http://i.imgur.com/MdsekCI.png

I tried to write vertical-align:middle, but hr goes down, and I deleted.
HTML

<link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>

<hr class="hrtitle"/><h2 class="fontraleway">WHO WE ARE?</h2><hr class="hrtitle"/>

CSS

.fontraleway{
font-family: 'Raleway', sans-serif;
}
h2{
    text-align:center;
    margin-top: 60px;
    margin-bottom: 20px;
    font-weight: 300;
    color:#333434;
    display: inline-block;

}
.hrtitle{
    display: inline-block;
    height: 1px;
    background-color:#3eb8df;
    border:none;
    width:30px;

}

Code on JSFIDDLE
http://jsfiddle.net/x86o57rc/


Source: html

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.