Center text vertical in a DIV when images is involve using Bootstrap 3 (vertical-align)

Question

I am trying to center a text vertically so it looks nice using Twitter Bootstrap 3 and CSS but I can't get it to work. I have the following HTML:

<div class="col-md-3 vcenter">
  <img src="https://dummyimage.com/30x30/000/fff" class="pull-left">
</div>
<div class="col-md-9 vcenter">
  <h3>header 3</h3>
</div>

Then I am applying the following CSS (found here ):

.vcenter {
  display: inline-block;
  vertical-align: middle;
  float: none;
}

Here is Fiddle with an example of what's currently happening. Can I get some help?

Answer 1

 img{ width:200px; height:200px; } .vcenter { display: inline-block; vertical-align: middle; } 

 <div class="col-md-3 vcenter"> <img src="https://i.stack.imgur.com/wwy2w.jpg" class="pull-left"> </div> <div class="col-md-9 vcenter"> <h3>header 3</h3> </div> 

Answer 2

If able, can you modify your HTML to use a single column row?

Attached JS Fiddle: https://jsfiddle.net/qgas0tej/3/

Here is a possible solution that may be what you're looking for:

<div class="row">
  <div class="col-md-12">
    <div class="vcenter">
      <img src="https://dummyimage.com/30x30/000/fff">
      <h3>header 3</h3>
    </div>
  </div>
</div>

.vcenter {
  display: table;
}
img {
  display: block;
  float: left;
}
h3 {
  padding-left: 10px;
  display: table-cell;
  vertical-align: middle;
  }

Answer 3

There's nothing wrong with your vcenter style. The problem lies in the bootstrap margin of h3 tag not being vertically consistent, detailed below.

This shows the bootstrap inconsistent vertical margin:

Just adding margin to your h3 tag makes it vertically consistent and fixes the issue:

CSS:

.vcenter {
  display: inline-block;
  vertical-align: middle;
  float: none;
}

h3 {
   margin-bottom: 20px;
}

HTML:

<div class="col-md-3 vcenter">
  <img src="https://dummyimage.com/30x30/000/fff" class="pull-left">
</div>
<div class="col-md-9 vcenter">
  <h3>header 3</h3>
</div>

Solution in JSFiddle