垂直對齊塊引導

Question

我有兩個按鈕：

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-lg-12"> 
      <div class="main"> 
       <button class="btn-primary btn-lg center-block ">Sign in </button><br> 
       <button class="btn-primary btn-lg center-block">Sign up </button> 
      </div> 
     </div> 
    </div> 
</div> 

我該怎麼辦垂直對齊？我希望那些按鈕位於中心。

我嘗試的margin-top：50％，但它不爲我工作。

Answer 1

如果你只是把這些放在頁面的中心，你不需要行/列設置，但如果你確實有需要，那麼將.main div放在你的行/列周圍。

注：我會使用btn-block爲您的按鈕，你也不需要center-block。

參見示例代碼段。

否行/列實施例

.main { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="main"> 
 
    <button class="btn-primary btn-lg btn-block">Sign in</button> 
 
    <br> 
 
    <button class="btn-primary btn-lg btn-block">Sign up</button> 
 
</div>

隨着行/列實施例

.main { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div class="main"> 
 
    <div class="row"> 
 
     <div class="col-lg-12"> 
 
     <button class="btn-primary btn-lg btn-block">Sign in</button> 
 
     <br> 
 
     <button class="btn-primary btn-lg btn-block">Sign up</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>