Vertically align content of Bootstrap 3 column

Question

After coming back to web-development after a four year hiatus, I am having a tough time vertically aligning the contents of a bootstrap 3 column with the next column. I have tried searching this site as well as generic searches in general and have just not come up with the right solution ... or my search terms are poor.

In the HTML/CSS below, I would like to vertically center the "Page Title" text in the left column. I would like to keep the HTML and CSS as concise as possible while using the Bootstrap 3 CSS, so I just think I am completely missing something simple.

HTML

<div class="row page-header-box">
<div class="col-md-2 col-sm-2 col-xs-3 page-header-title">Page Title</div>
<div class="col-md-10 col-sm-10 col-xs-9 page-header-seperator">
    <div class="page-header-description"><small>Standard Text Description</small></div>
    <div class="page-header-alt"><small>Additional Text Description</small></div>
</div>

CSS

    .page-header-box {
        background-color:#3D3D3D;
        border-bottom:5px solid #b3b5b8;
        margin-bottom:10px;
    }
    .page-header-title { color:#f79239;text-align:right;vertical-align:middle;margin:10px 0; }
    .page-header-seperator { border-left:5px solid #4e2f91;margin:10px 0; }
    .page-header-description { color:#febe10; }
    .page-header-alt { margin-top:5px;color:#0093b2; }
    

Here is a jsFiddle ... http://jsfiddle.net/E6LcY/8/

This is one of the few times I have ever posted, so pointing me in the right direction would be great.

Answer 1

I considered deleting this question, but thought the answer could be useful to someone else (like me) that is looking for a possible solution.

I wanted to stay within the Bootstrap 3 framework ... and ended up adding some JavaScript to make the "titled" centered. I figured that Bootstrap 3 basically requires jQuery for some functionality so it was OK.

Now, I am sure there may be a better way, but I did not like the other solutions. Thanks to all that attempted to put me on the right paths.

HTML

<div class="row page-header-box">
<div class="col-md-2 col-sm-2 col-xs-3 page-header-title" id="header-title">Page Title</div>
<div class="col-md-10 col-sm-10 col-xs-9 page-header-seperator" id="header-seperator">
    <div class="page-header-description"><small>Standard Text Description Standard Text Description Standard Text Description Standard Text Description Standard Text Description Standard Text Description</small></div>
    <div class="page-header-alt"><small>Additional Text Description</small></div>
</div>
</div>

CSS

.page-header-box {
background-color:#3D3D3D;
border-bottom:5px solid #b3b5b8;
margin-bottom:10px;
}
.page-header-title { color:#f79239;text-align:right;margin-bottom:10px; vertical-align: middle; }
.page-header-seperator { border-left:5px solid #4e2f91;margin:10px 0; }
.page-header-description { color:#febe10; }
.page-header-alt { margin-top:5px;color:#0093b2; }

JS (using jQuery)

var sep_height = '';
$(window).on("load resize", function(e) {
var seperatorHeight = $('#header-seperator').height();
if (seperatorHeight != sep_height) {
    sep_height = seperatorHeight;
    var titleHeight = $('#header-title').height();
    var difference = ((seperatorHeight - titleHeight) / 2) + 5;
    $('#header-title').css('margin-top', difference + 'px');
}
});

Note: the "sep_height" is just so that I don't make unnecessary calculations and only modify the title height when I need to. I am also adding an additional 5px to the top- margin to compensate for the margins on the description text.

Here is the latest fiddle (with a fix for the onLoad event): http://jsfiddle.net/E6LcY/15/

Thanks again to all those who helped.

Answer 2

Add the rule: line-height: 45px; to the col-md-2 class

UPDATED FIDDLE

Answer 3

I'm starting to get tired of bootstrap in certain aspects somehow. Sometimes the amount of hacking required to accomplish certain functionalities is not worth the supposed benefits you get from using it.

In this case, I ended archiving the functionality I needed by abandoning bootstrap and using a combination of flexboxes with those properties applied to the parent:

.parent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

those to the children:

.parent > div {
  display: inline-block;
  vertical-align: middle;
}

and this media query:

@media all and (max-width: 500px) {
  .parent {
    /* for small screens, we use column direction rather than row */
    flex-direction: column !important;
  }
}

The html involved is like this:

<div class="parent">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

I used this, for instance, for a responsive footer. Playing with a combination of some fixed width and margin (same for each), they get nicely aligned on top of the others in different quantities per row depending on the width of the screen, until it is narrow enough to just show them in one row.

In my opinion, much clearer, easier, cleaner and less code, with better responsiveness, better layout support, avoids using javascript and without all the overhead and hassle of bootstrap.

Answer 4

This is how i do, you can try this:

.Parentdiv{
position:relative;
width:100%;
height:100%;
}

.Parentdiv .childdiv{
position: absolute;
top:0;
bottom:0;
margin:auto;
}