为什么我无法为hr标记设置vertical-align middle

Question

我在h2中有标题，左右定义为hr。 我无法将hr定位到h2的中间。 在JSfiddle看起来不错，但在我的情况下看起来像这样 http://i.imgur.com/MdsekCI.png

我尝试写了vertical-align：middle，但是hr关闭了，我删除了。 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;

}

JSFIDDLE上的代码 http://jsfiddle.net/x86o57rc/