bootstrap v3.3.6-垂直对齐bootstrap列中的内容

Question

我使用bootstrap v3.3.6并尝试垂直对齐中间的"我的链接"。有什么课程可以做到这一点吗？

尝试过这个，对我来说没有用Bootstrap 3 垂直对齐

<li class="list-group-item">  
<div class="row">
<div class="col-md-8">
<b>Some Title</b>
<br>
Some details some details some details some details
</div>
<div class="col-md-4">
<a id="my-link">My link</a>
</div>
</div>
</li>

Answer 1

您可以尝试使用display: table和display: table-cell。

.col-xs-8, .col-xs-4 {
height: 60px;
}
.d-table {
display: table;
height: 100%;
}
.d-table-cell {
display: table-cell;
}
.align-middle {
vertical-align: middle;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<li class="list-group-item">
<div class="row">
<div class="col-xs-8">
<b>Some Title</b>
<br>
Some details some details some details some details
</div>
<div class="col-xs-4">
<div class="d-table">
<div class="d-table-cell align-middle">
<a id="my-link">My link</a>
</div>
</div>            
</div>
</div>
</li>

display: table需要height: value属性。然后，display: table-cell将此高度值与vertical-align: middle一起使用。

在本例中，.col-xs-8和.col-xs-4具有相同的高度值：60px。

p/S：我已经将.col-md-8和.col-md-4更改为.col-xs-8和.col-xs-4以适应此网站上的内容。

Answer 2

垂直居中的另一种选择是将CSSdisplay: flex;属性与align-items: center;结合使用。您可以查看下一个示例。

.fixed-h {
height: 100px;
}
.vcenter-flex {
display: flex;
align-items: center;
}
.hcenter-flex {
display: flex;
justify-content: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<li class="list-group-item">  
<div class="row">
<div class="col-md-8 fixed-h bg-info">
<b>Some Title</b>
<br>
Some details some details some details some details
</div>
<div class="col-md-4 fixed-h vcenter-flex hcenter-flex bg-warning">
<a id="my-link">My link</a>
</div>
</div>
</li>

对于垂直居中，父元素需要有一个定义的高度，这就是您在样式中看到的类fixed-h的用途。此外，作为参考，我还制作了柔性模式的水平居中：hcenter-flex。最后，背景颜色只是用来参考容器的限制。