如何讓一個按鈕除了圖像之外垂直居中

Question

我該如何去除圖像之外的居中按鈕？作爲家長沒有一個固定大小

<div class="row"> 
 
     <div class="col-xs-12 col-sm-2"> 
 
      <p style="padding:20px;"></p> 
 
      <img src="img/logo.png" class="img-responsive"> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-2"> 
 
      <div class="btn-group btn-block" role="group"> 
 
       <a type="button" class="btn btn-block btn-warning" style="top:50%;">Sign in 
 
       </a> 
 
      </div> 
 
     </div> 
 
    </div>

top:50%將無法​​正常工作

這裏是一個fiddle例如： https://jsfiddle.net/DTcHh/#&togetherjs=d6NLIis7u4

Answer 1

垂直中心東西的最好方法與CSS是使用行高。但是這隻有在你有一個固定的高度和一行文字時纔有效。

Answer 2

我用display: table，display: table-cell和vertical-align: middle技巧等等，在這一個：

https://jsfiddle.net/qh7nrcyh/1/

請檢查它適用於你。