使用Bootstrap垂直对齐图像与近div

Question

我想垂直对齐一个图像与他的近div，div有一个动态高度，我在将图像放在中间时遇到了很多麻烦。 有我的代码：

<div class="row">
  <img class="col-sm-4 col-md-4" src="/img/height.svg"></img>
  <div class="col-sm-8 col-md-8"><span>Height</span><br/>335.00 mm</div>
</div>

结果是：

我希望图像位于div的中间，如下所示：

Answer 1

您可以使用flexbox：

.row {
  align-items: center;
  display: flex;
}
.row img {
  height: 25px;
  margin-right: 1rem;
  width: 25px;
}

请参阅小提琴：https://jsfiddle.net/72f7srr6/1/

Answer 2

如果我理解正确你试图垂直对齐一个div，你还有另一个带有图像的div。

垂直对齐div的最佳方法是将图像作为背景图像放入，并为该div设置一个高度，以防止高度变得不动态。它可以让你更有控制力。例如;

<!-- Div with BG Image -->
<div class="col-sm-4 col-md-4">
   <div class="bg-image" style="background-image:url(/img/height.svg);"></div>
</div>

.bg-image {
   background-repeat: no-repeat;
   background-position: top center;
   background-size: cover;
   height: 250px; // this can be anything
}

<!-- Div to be centrally aligned -->
<div class="col-sm-4 col-md-4">
   <div class="bg-image-module">
     <div class="bg-image-module-block">
        <span>Height</span><br/>335.00 mm
     </div>
   </div>
</div>

Give the bg-image-module div these styles:

.bg-image-module {
   display: table;
   height: 250px; //this must be the same as the height on the bg-image div in order to vertically align the content.
}

.bg-image-module-block {
   display: table-cell;
   vertical-align: middle;
 }

这是垂直对齐内容的好方法，您可以将高度更改为您需要的任何内容，并且可以响应地更改。