Twitter Bootstrap Question posted in

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

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?

Tags:

3

Answers


  1. 0 
    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>
    Login or Signup to reply.
  2. 0

    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;
  }
    Login or Signup to reply.
  3. 0

    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:

    SS 1

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

    SS 2

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search