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:

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?

Answer 1

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>