豎直對齊引導行內的div

我無法弄清楚如何將包含「Go」按鈕的div垂直對齊到底部。豎直對齊引導行內的div

我嘗試了幾件事但沒有工作。

這裏是一個的jsfiddle：https://jsfiddle.net/2fzq3xb3/2/

這裏是代碼：

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
    <title>align div to bottom inside div</title> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <div class="container"> 
 
    <form method="post" action="#"> 
 
    \t <div class="row" style="position: relative;"> 
 
    \t \t <div class="col-xs-10"> 
 
    \t  \t <div class="row"> 
 
    \t \t   <div class='col-xs-6'> 
 
    \t \t    <div class="form-group"> 
 
    \t \t    \t <label for="start-date">Start date</label> 
 
    \t \t     <div class='input-group date' id='start-date'> 
 
    \t \t      <input type='text' class="form-control" id='start_date' name='start_date' /> 
 
    \t \t      <span class="input-group-addon"> 
 
    \t \t       <span class="glyphicon glyphicon-calendar"></span> 
 
    \t \t      </span> 
 
    \t \t     </div> 
 
    \t \t    </div> 
 
    \t \t   </div> 
 
    \t \t   <div class='col-xs-6'> 
 
    \t \t    <div class="form-group"> 
 
    \t \t    \t <label for="end-date">End date</label> 
 
    \t \t     <div class='input-group date' id='end-date'> 
 
    \t \t      <input type='text' class="form-control" id='end_date' name='end_date' /> 
 
    \t \t      <span class="input-group-addon"> 
 
    \t \t       <span class="glyphicon glyphicon-calendar"></span> 
 
    \t \t      </span> 
 
    \t \t     </div> 
 
    \t \t     <?php 
 
    \t \t     ?> 
 
    \t \t    </div> 
 
    \t \t   </div> 
 
    \t \t  </div> 
 
    \t \t </div> 
 
    \t  <div class="col-xs-2" style="position: relative; bottom: 50%;transform: translateY(-50%);"> 
 
    \t   \t <button type="submit" class="btn btn-primary btn-xs">Go</button> 
 
    \t  </div> 
 
    \t </div> 
 
    </form> 
 
    </div> 
 
    
 
    </body> 
 
    </html>

感謝

來源

2016-11-07 Karim Mtl

這個CSS添加到父DIV。

display:table-cell; 
vertical-align:middle;

來源

2016-11-07 17:47:19 Korgrue

沒有工作 –

確保您設置了家長和孩子的高度。 – Korgrue

這是我找到的解決方案。任何改進建議，歡迎：

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>align div to bottom inside div</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    </head> 
    <body> 
    <div class="container"> 
    <form method="post" action="#"> 
     <div class="row"> 
      <div class="col-xs-10" style="max-width: 500px;"> 
       <div class="row"> 
        <div class='col-xs-6'> 
         <div class="form-group"> 
          <label for="start-date">Start date</label> 
          <div class='input-group date' id='start-date' style="max-width: 230px;"> 
           <input type='text' class="form-control" id='start_date' name='start_date' /> 
           <span class="input-group-addon"> 
            <span class="glyphicon glyphicon-calendar"></span> 
           </span> 
          </div> 
         </div> 
        </div> 
        <div class='col-xs-6'> 
         <div class="form-group"> 
          <label for="end-date">End date</label> 
          <div class='input-group date' id='end-date' style="max-width: 230px;"> 
           <input type='text' class="form-control" id='end_date' name='end_date' /> 
           <span class="input-group-addon"> 
            <span class="glyphicon glyphicon-calendar"></span> 
           </span> 
          </div> 
          <?php 
          ?> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="col-xs-2" style="height:74px;"> 
        <button type="submit" class="btn btn-primary btn-ss" style="position:absolute; bottom: 15px;">Go</button> 
      </div> 
     </div> 
    </form> 
    </div> 

    </body> 
    </html>

感謝

來源

2016-11-08 02:24:57

只需確保row有position屬性設置爲static（默認值）。我不知道爲什麼，但是如果將它更改爲relative或absolute，它將不起作用。

.col-xs-12 { 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<div class="row"> 
 
    <div class="col-xs-12"> 
 
    some text... 
 
    </div> 
 
</div>

來源

2017-09-10 17:05:49 YuRa44

豎直對齊引導行內的div

回答

相關問題