Question

我无法弄清楚如何将包含“Go”按钮的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="#">
    	<div class="row" style="position: relative;">
    		<div class="col-xs-10">
    	    	<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'>
    		                    <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'>
    		                    <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="position: relative; bottom: 50%;transform: translateY(-50%);">
    	        	<button type="submit" class="btn btn-primary btn-xs">Go</button>
    	    </div> 
    	</div>
    </form>
    </div>
    
    </body>
    </html>

由于

Answer 1

将此CSS添加到父div。

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

Answer 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="#">
        <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>

由于

Answer 3

确保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>

垂直对齐引导行内的div

3 个答案: