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.