Question

我使用bootstrap v3.3.6并尝试垂直对齐中间的“我的链接”。有没有可用的课程来实现这一目标？

试过这个，对我不起作用vertical-align with 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

垂直居中的另一种方法是将 CSS display: 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。最后，仅应用背景色来引用容器限制。

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

2 个答案: