Troyer Troyer - 28 days ago 12
CSS Question

Vertical align image with near div with Bootstrap

I want to vertically align one image with his near div, the div have a dynamic height and I'm having a lot of trouble putting the image on the middle.
There is the code I have:

<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>


And the result is:

First result

I want the image be on the middle of the div like this:

enter image description here

Answer

You could use flexbox like:

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

See the fiddle: https://jsfiddle.net/72f7srr6/1/