How to vertically center Bootstrap columns that are inside another column?

Question

I want to vertically center the divs inside col-md-12. This is the structure:

.list-item {
  border-bottom: 1px solid #e7e7e7;
  float: left;
  padding: 15px 0;
  width: 100%;
}
.list-item img {
  width: 60px;
  height: 60px;
}
.col-md-2 {
  float: left;
  width: 16.66666667%;
}

<div class="list-item col-md-12 clearfix">
  <div class="col-md-1">
    <img class="img-circle" src="https://aframe.io/aframe/examples/_skies/puydesancy.jpg">
  </div>
  <div class="col-md-2">
    <strong>
      <a href="#/buildings/1">Central park</a>
    </strong>
  </div>
  <div class="col-md-5">
    <span>The description for central park description for the central park</span>
  </div>
  <div class="col-md-2">
    <span>Category count:</span>
    <strong>3</strong>
  </div>
  <div class="col-md-2">
    <span>Panorama count:</span>
    <strong>7</strong>
  </div>
</div>

I tried: vertical-align: middle and display: inline but it didn't work. Is there another way?

Here's the JSFiddle: https://jsfiddle.net/wLgfLo3L/

(You need to resize the browser to full screen).

That construct is invalid, a col must be within a row and a row within a container. — dude, Oct 20 '16 at 11:54

score 6 · Accepted Answer · answered Mar 25 '16 at 08:52

Very simple solution for this is with this css.

HMTL

<div class="list-item col-md-12 clearfix main">
  <div class="col-md-1 center">
    <img class="img-circle" src="https://aframe.io/aframe/examples/_skies/puydesancy.jpg">
  </div>
  <div class="col-md-2 center">
    <strong>
      <a href="#/buildings/1">Central park</a>
    </strong>
  </div>
  <div class="col-md-5 center">
    <span>The description for central park description for the central park</span>
  </div>
  <div class="col-md-2 center">
    <span>Category count:</span>
    <strong>3</strong>
  </div>
  <div class="col-md-2 center">
    <span>Panorama count:</span>
    <strong>7</strong>
  </div>
</div>

CSS

.main{
  display:table;
}
.center{
  display:table-cell;
  vertical-align:middle;
}

In the above codes i have added .main class to main div and .center class to div you want to align center.

With display:table to main and display:table-cell to inner div you can center align the div with vertical-align:middle because this converts the nature of div to table.

Here is the updated fiddle link check it https://jsfiddle.net/yudi/wLgfLo3L/1/

Here's a fiddle with all the elements given a different background color https://jsfiddle.net/f6bu0tnk/1/ — SamB, Feb 17 '17 at 21:53

How to vertically center Bootstrap columns that are inside another column?

1 Answers1