Question

我想将col-md-12内的div垂直居中。这是结构：

＆＃13;

.list-item {
  border-bottom: 1px solid #e7e7e7;
  float: left;
  padding: 15px 0;
  width: 100%;
}
.list-item img {
  width: 60px;
  height: 60px;
}
.col-md-2 {
  float: left;
  width: 16.66666667%;
}

＆＃13;

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

＆＃13;

我尝试过：vertical-align: middle和display: inline但它没有用。还有另一种方式吗？

这里是JSFiddle：https://jsfiddle.net/wLgfLo3L/

（您需要将浏览器的大小调整为全屏）。

Answer 1

非常简单的解决方案是使用此css。

<强> HMTL

<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类，以便您想要对齐中心。

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

这是更新的小提琴链接，请检查https://jsfiddle.net/yudi/wLgfLo3L/1/

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

1 个答案: