如何在分页引导程序 3 旁边垂直居中页面限制器?

Question

我正在处理的页面包含一个带有分页元素的表(由 Bootstrap 3 提供(。我还想在分页中添加一个页面限制器，允许用户设置每页要显示的最大项目数。当我尝试这样做时，此操作的控件移出位置：

.block {
border: 1px solid #000;
border-radius: 2px;
margin: 2px;
}
.left {
display: inline-block;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="block left">
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="disabled">
<a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="block left">
<!-- Must go in here -->
<!--<div class="form-inline">
<div class="form-group">-->
<!--<select type="text" class="form-control" id="exampleInputName2">-->
<select type="text" id="exampleInputName1">
<option>10</option>
<option>20</option>
<option>50</option>
</select>
<!--<label for="exampleInputName2">Items per page</label>
</div>
</div>-->
</div>
<br />
<br /> / Select below vertically centered next to the pagination above /
<div class="block text-center">
<!-- How to copy this into the second "block" without break it from its layout? -->
<div class="form-inline">
<div class="form-group">
<select type="text" class="form-control" id="exampleInputName2">
<option>10</option>
<option>20</option>
<option>50</option>
</select>
<label for="exampleInputName2">Items per page</label>
</div>
</div>
</div>

JSFiddle

我该如何解决这个问题？

我尝试添加margin-top: -50px;(只是为了让它首先移动(，但这似乎无法移动元素：

.block {
border: 1px solid #000;
border-radius: 2px;
margin: 2px;
}
.left {
display: inline-block;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="block left">
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="disabled">
<a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="block left" style="margin-top: -50px;">
<!-- Must go in here -->
<div class="form-inline">
<div class="form-group">
<select type="text" class="form-control" id="exampleInputName1">
<!--<select type="text" id="exampleInputName1">-->
<option>10</option>
<option>20</option>
<option>50</option>
</select>
<label for="exampleInputName2">Items per page</label>
</div>
</div>
</div>
<br />
<br /> / Select below vertically centered next to the pagination above /
<div class="block text-center">
<!-- How to copy this into the second "block" without break it from its layout? -->
<div class="form-inline">
<div class="form-group">
<select type="text" class="form-control" id="exampleInputName2">
<option>10</option>
<option>20</option>
<option>50</option>
</select>
<label for="exampleInputName2">Items per page</label>
</div>
</div>
</div>

JSfiddle

Answer 1

无需设置margin-top: -50px。您可以添加父div 并在 css 类下方添加。

小提琴

.alignCenter {
display: flex;
align-items: center
}