当使用Bootstrap 3进行图像处理时，使DIV中的文本垂直居中（垂直对齐）

Question

我正在尝试将文本垂直居中，因此使用Twitter Bootstrap 3和CSS看起来不错，但我无法使其正常工作。 我有以下HTML：

<div class="col-md-3 vcenter">
  <img src="https://dummyimage.com/30x30/000/fff" class="pull-left">
</div>
<div class="col-md-9 vcenter">
  <h3>header 3</h3>
</div>

然后，我将应用以下CSS（在此处找到）：

.vcenter {
  display: inline-block;
  vertical-align: middle;
  float: none;
}

这是Fiddle，提供了一个有关当前情况的示例。 我可以帮忙吗？

Answer 1

 img{ width:200px; height:200px; } .vcenter { display: inline-block; vertical-align: middle; } 

 <div class="col-md-3 vcenter"> <img src="https://i.stack.imgur.com/wwy2w.jpg" class="pull-left"> </div> <div class="col-md-9 vcenter"> <h3>header 3</h3> </div> 

Answer 2

如果可以，您可以修改HTML以使用单列行吗？

附加的JS小提琴： https : //jsfiddle.net/qgas0tej/3/

这是您正在寻找的可能的解决方案：

HTML：

<div class="row">
  <div class="col-md-12">
    <div class="vcenter">
      <img src="https://dummyimage.com/30x30/000/fff">
      <h3>header 3</h3>
    </div>
  </div>
</div>

CSS：

.vcenter {
  display: table;
}
img {
  display: block;
  float: left;
}
h3 {
  padding-left: 10px;
  display: table-cell;
  vertical-align: middle;
  }

Answer 3

您的vcenter样式没有任何问题。 问题在于h3标签的引导程序边距在垂直方向上不一致，详情如下。

这表明引导程序的垂直边距不一致：

只需在h3标签上增加边距，即可使其在垂直方向上保持一致并解决以下问题：

CSS：

.vcenter {
  display: inline-block;
  vertical-align: middle;
  float: none;
}

h3 {
   margin-bottom: 20px;
}

HTML：

<div class="col-md-3 vcenter">
  <img src="https://dummyimage.com/30x30/000/fff" class="pull-left">
</div>
<div class="col-md-9 vcenter">
  <h3>header 3</h3>
</div>

JSFiddle中的解决方案