Troyer Troyer - 1 year ago 120
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>

And the result is:

First result

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

enter image description here

Answer Source

You could use flexbox like:

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

See the fiddle:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download