CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
JQuery Mobile
JQuery Mobile

Reputation: 6291

Vertically Center Content in Bootstrap 3

I recognize that this question has been asked a hundred times. However, the answers that I see do not work in my situation. This makes me believe there is something additional in my content.

<div class="row" style="margin-left:6px; margin-right:6px;" ng-repeat="product in products">
  <div class="col-xs-6 col-sm-6 col-lg-6">
    <a>
      <h4>{{product.name}}</h4>
      <h5>{{product.description}}</h5>
    </a>
  </div>

  <div class="col-xs-6 col-sm-6 col-lg-6">
    <span class="pull-right">
      remove&nbsp;
      <i class="glyphicon glyphicon-remove pull-right"></i>
    </span>
  </div>
</div>

I want the remove [x] in the second column to be vertically centered in relation to the first column. Right now, the remove [x] is vertically centered across the top. I thought I could vertically center the content by doing the following:

<div class="col-xs-6 col-sm-6 col-lg-6" style="float:none; display:table-cell; vertical-align:center">
    <span class="pull-right">
      remove&nbsp;
      <i class="glyphicon glyphicon-remove pull-right"></i>
    </span>
  </div>

Unfortunately, that did not work. I'm not sure what I'm doing wrong.

Upvotes: 0

Views: 127

Answers (3)

Devin
Devin

Reputation: 7720

First, I'd recommend you to add an additional class to the columns you want to work with. In your bare-bones example, it won't make a difference, but once you start adding more elements, you'll find out the advantages of managing elements by their re-usable class.

So, first step, a tiny change in your HTML. Not really needed since you could easily target (for example) .col-xs-6 , but this is a general approach (as we're at it, I'd add a class to that row and remove that inline style)

<div class="row" style="margin-left:6px; margin-right:6px;" ng-repeat="product in products">
  <div class="col-xs-6 col-sm-6 col-lg-6 midvert">
    <a>
      <h4>{{product.name}}</h4>
      <h5>{{product.description}}</h5>
    </a>
  </div>

  <div class="col-xs-6 col-sm-6 col-lg-6 midvert">
    <span class="pull-right remove">
      remove&nbsp;
      <i class="glyphicon glyphicon-remove"></i>
    </span>
  </div>
</div>

Now that we can SAFELY target Bootsrap element without affecting the flow of the same re-usable classes in further uses, we simply give a vertical-align to them, like this:

.midvert {
    display:inline-block;
    vertical-align:middle
  }

See how the vertical align is added to the CONTAINING BLOCK ELEMENT, not the element you want to align itself. But of course, that won't do anything at all, because our .remove element needs some sort of defined height, so we add the following:

.remove {
    line-height: 4; 
  }

While the reasons for single numbers is open to discussion (you could use px, rem, em, %, etc), and I have seen that most people here use the px approach, I prefer to use single numbers. You can see the rationale here Prefer unitless numbers for line-height values , but again, use as you please. You'll notice that a number between 4 and 4.5 is the perfect fit, just resize window and see it by yourself.

I've forked a Bootply to demonstrate the issue

Upvotes: 2

Dan
Dan

Reputation: 9468

You could achieve this by adding a line-height to your "remove" link.

For example if you add this class to your link:

  .remove {
    line-height: 40px; 
    vertical-align: middle;
  }

It will be aligned.

Bootply demo

Upvotes: 1

Ashish Balchandani
Ashish Balchandani

Reputation: 1256

I have created Fiddle for you, Hopefully this work for you.

Please observe css tab where i have added display:table-cell; for other col-sm-6 css class as well.

Upvotes: 0

Related Questions