如何在我的情況下垂直對齊中間的文字

我有類似

<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。有人可以幫我解決這個問題嗎？謝謝！

來源

2014-10-20 BonJon

做ü嘗試哪些因素一起ALGN？按鈕？ – 2014-10-20 02:07:23

與col-xs-9類div元素 – BonJon 2014-10-20 02:14:29

大聲笑，我知道，但你想col-xs div留在同一行的按鈕或什麼？ – 2014-10-20 02:26:55

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>

來源

2014-10-20 02:25:21

如何在我的情況下垂直對齊中間的文字

回答

相關問題