CODEWITHSUNDEEP
csstwitter-bootstrapflexbox
unfollow
unfollow

Reputation: 225

Vertically centering content in display: flex; columns

I’m using Flexbox to align the height of two adjacent columns, which works. I now need to vertically center the inner content within the flex box columns without using fixed heights. Additionally this all needs to work within Bootstrap 3. Please see code below:

.row-flex,
.row-flex > div[class*='col-'] {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex: 1 1 auto;
}
.row-flex-wrap {
  -webkit-flex-flow: row wrap;
  align-content: flex-start;
  flex: 0;
}
.row-flex > div[class*='col-'],
.container-flex > div[class*='col-'] {
  margin: -.2px;
  /* hack adjust for wrapping */
}
.container-flex > div[class*='col-'] div,
.row-flex > div[class*='col-'] div {
  width: 100%;
}
.flex-col {
  display: flex;
  display: -webkit-flex;
  flex: 1 100%;
  flex-flow: column nowrap;
}
.flex-grow {
  display: flex;
  -webkit-flex: 2;
  flex: 2;
}
.content {
  border: 1px solid black;
  padding: 20px;
}
.content-inner {
  border: black solid 1px;
  padding: 20px;
}
.img {
  width: 100px;
  height: auto;
  display: block;
  margin: 0 auto;
}
figcaption {
  text-align: center;
}
[class*="col-"] {
  padding: 0;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row row-flex row-flex-wrap">
    <div class="col-xs-7">
      <div class="content">
        <div class="content-inner">
          <figure>
            <img class="img" src="http://i80.photobucket.com/albums/j182/swiftian/headersnstuff/sidebar_zaius.jpg" alt="Macaque in the trees">
            <figcaption>Dr. Zaius</figcaption>
          </figure>
        </div>
      </div>
    </div>
    <div class="col-xs-5">
      <div class="content">
        <div class="content-inner">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Lorem ipsum dolor sit amet,
          consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.
        </div>
      </div>
    </div>
  </div>
  <!--/row-->
</div>
<!--/container-->
<hr>

JS FIDDLE https://jsfiddle.net/baydbzbn/1/

Appreciate any help.

Upvotes: 1

Views: 122

Answers (1)

Seba Maldonado
Seba Maldonado

Reputation: 355

Add this to your .content class CSS definition

  display: flex;
  align-items: center;

Upvotes: 3

Related Questions