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?

Can you please explain in a different way what you want? I don't quite follow your description. Perhaps you can even provide a graphical representation of what you want? — Pegues, Jan 05 '17 at 15:27
Just a guess, but I think your `class="pull-left"` is overriding the `float: none` — daleyjem, Jan 05 '17 at 15:31

score 3 · Answer 1 · answered Jan 05 '17 at 15:34

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>

Pegues · Accepted Answer · 2017-01-05T15:45:29.763

1

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:

HTML:

<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>

CSS:

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

edited Jan 05 '17 at 15:45

answered Jan 05 '17 at 15:34

Pegues

1,693
2
21
38

I like this solution and yes I can modify the HTML, I didn't ask before but would be possible to add a small text (maybe a h5 to use as a subtitle or hint) below the `h3`? – ReynierPM Jan 05 '17 at 15:37
This is certainly possible. Let me create an update to the fiddle for you to use as a visual example: https://jsfiddle.net/qgas0tej/4/ With this example you could use a span with a class inside the h3, as in `
header 3
This is subtext
` and the CSS for the class `smalltext` being: `.smalltext { font-size: 10px; }` – Pegues Jan 05 '17 at 15:41
1

Or you can use this modified example to wrap the `h3` and `h5` tags with a `div`, and assign `vertical-align: middle` to the `div`, and everything inside it will be vertically aligned no matter what the tag: https://jsfiddle.net/qgas0tej/5/ – Pegues Jan 05 '17 at 15:43

score 1 · Answer 3 · answered Jan 05 '17 at 16:06

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

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

3 Answers3

header 3This is subtext

header 3
This is subtext