在我的情况下如何垂直对齐中间的文本

Question

我正在尝试垂直对齐我的div文本。

我有类似的东西

<div id="wrapper" class="container">
    <div class="row">
        <div class="col-xs-offset-1 col-xs-2 test">
             <div class="row test-bar">
                <div class="col-xs-9">
                    <span>Title 1</span>
                </div>
                <div class="col-xs-3" >
                    <button><span class="glyphicon glyphicon-cog"></span></button>
                </div>
            </div>
        </div>
        <div class="col-xs-9">
           other contents...
        </div>
   </div>
</div>

CSS SASS 

#wrapper{
    margin-top:30px;
      .test {
          margin-right:3px;
          min-height:380px;
             .tesr-bar {
                 background-color:#E3E3E3;
                    span {
                        line-height:25px;
                        vertical-align:middle;
                    }
             }
      }
   }
}

由于某些原因，我无法将文本“ Title 1 ” vertical-align middle 。 有人可以帮我吗？ 谢谢！

Answer 1

jsfiddle

 span { margin:auto; display:table; } #wrapper { margin-top:30px; .test { margin-right:3px; min-height:380px; .tesr-bar { background-color:#E3E3E3; span { line-height:25px; } } } } } 

 <div id="wrapper" class="container"> <div class="row"> <div class="col-xs-offset-1 col-xs-2 test"> <div class="row test-bar"> <div class="col-xs-9"> <span>Title 1</span> </div> <div class="col-xs-3"> <button><span class="glyphicon glyphicon-cog"></span> </button> </div> </div> </div> <div class="col-xs-9">other contents...</div> </div> </div>