Как вертикально выравнивать текст посередине в моем случае

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>