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

Question

我使用 bootstrap v3.3.6 并尝试在中间垂直对齐“我的链接”。是否有任何类(class)可以实现这一目标？

试过了，对我没用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 以适应本网站的内容。