Vertical align images evenly in Bootstrap 3 with respect to next column

Question

I want to vertically align one or multiple images with a text (whose height is unknown). The images should be vertically centered:

enter image description here

The current HTML code looks like this:

<div class="row">
    <div class="col-md-3">
        <img src="images/sampleimage.png" class="img-rounded img-responsive"/>
    </div>
    <div class="col-md-9">
        Text goes here
    </div>
</div>

How can I achieve this without knowing the height of the text column?

Edit I can now center align the images: CSS:

row-xs-flex-center {
    display:flex;
    align-items:center;
}
@media ( min-width:800px ) {
    .row-sm-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 992px ) {
    .row-md-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 1200px ) {
    .row-lg-flex-center {
        display:flex;
        align-items:center;
    }
}

with the div changed as follows:

<div class="row row-sm-flex-center">

But the images stick on top of each other. Is there a way to evenly vertically distribute the images?

Have you looked at: [vertical-align with bootstrap 3](http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3)? — Hashem Qolami, Mar 08 '15 at 15:20
Thanks, this helps a lot. I can now center align the images (see edit) but the images are stacked on top of each other. I want the images to evenly vertically distribute as shown in the image above. Do you have an idea for this? — Hyndrix, Mar 08 '15 at 15:31

score 1 · Accepted Answer · edited May 23 '17 at 10:09

Assuming that using Flexible box layout is an option, we can distribute the extra vertical space of the first column between the images evenly.

We should display the first column as a flex container and change its direction from row (default value) to column, and then add justify-content: space-around in order to achieve the layout:

Expanding @KevinNelson's answer which is inspired from an answer of mine:

Example Here (vendor prefixes omitted due to brevity.)

.row-xs-flex-center {
  display:flex;
  align-items:center;
}

@media ( min-width:768px ) {
 .row-sm-flex-center {
    display:flex;
    align-items:center; /* up to you */
  }

  .image-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* or center */
    align-self: stretch;     /* make sure that the column is stretched */
    justify-content: space-around;
  }
}
@media ( min-width: 992px ) {
  .row-md-flex-center {
    display:flex;
    align-items:center;
  }
}
@media ( min-width: 1200px ) {
  .row-lg-flex-center {
    display:flex;
    align-items:center;
  }
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row row-sm-flex-center">
    <div class="col-sm-3 image-container">
      <img src="http://placehold.it/80" class="img-rounded img-responsive"/>
      <img src="http://placehold.it/80" class="img-rounded img-responsive"/>
    </div>
    <div class="col-sm-9">
      Text <br>
      Text <br>
      Text <br>
      Text <br>
      Text <br>
      Text <br>
      Text <br>
      Text <br>
      Text <br>
      Text <br>
      Text <br>
      Text <br>
      Text <br>
      Text <br>
      Text
    </div>
  </div>
</div>

Vertical align images evenly in Bootstrap 3 with respect to next column

1 Answers1