html - 如何垂直居中另一列内的 Bootstrap 列？

Question

<分区>

Answer 1

这个 css 是一个非常简单的解决方案。

HTML

<div class="list-item col-md-12 clearfix main">
  <div class="col-md-1 center">
    <img class="img-circle" src="https://aframe.io/aframe/examples/_skies/puydesancy.jpg">
  </div>
  <div class="col-md-2 center">
    <strong>
      <a href="#/buildings/1">Central park</a>
    </strong>
  </div>
  <div class="col-md-5 center">
    <span>The description for central park description for the central park</span>
  </div>
  <div class="col-md-2 center">
    <span>Category count:</span>
    <strong>3</strong>
  </div>
  <div class="col-md-2 center">
    <span>Panorama count:</span>
    <strong>7</strong>
  </div>
</div>

CSS

.main{
  display:table;
}
.center{
  display:table-cell;
  vertical-align:middle;
}

在上面的代码中，我添加了 .main 类到主 div 和 .center 类到你想要居中对齐的 div。

使用 display:table 到 main 和 display:table-cell 到内部 div 你可以将 div 居中对齐 vertical-align:middle 因为这会将 div 的性质转换为表格。

这是更新的 fiddle 链接检查它 https://jsfiddle.net/yudi/wLgfLo3L/1/