bootstrap 页面分成三列,垂直对齐Bootstrap 3列的内容

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

Page Title

Standard Text Description

Additional Text Description

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

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

解决方案

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

Page Title

Standard Text Description Standard Text Description Standard Text Description Standard Text Description Standard Text Description Standard Text Description

Additional Text Description

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.