使用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;
 }

這是垂直對齊內容的一種好方法，您可以將高度更改為所需的高度，並且可以進行響應地更改。