垂直对齐Bootstrap 3列的内容

Question

经过四年的中断后回到网络开发之后,我很难将bootstrap 3列的内容与下一列垂直对齐.我一直试着搜索这个网站以及一般的通用搜索,并且没有找到正确的解决方案...或者我的搜索条件很差.

在下面的HTML/CSS中,我想垂直居中左侧列中的"页面标题"文本.我想在使用Bootstrap 3 CSS时尽可能简洁地保持HTML和CSS的简洁,所以我想我完全错过了一些简单的东西.

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

这是一个jsFiddle ... http://jsfiddle.net/E6LcY/8/

这是我发布过的少数几次之一,因此指向正确的方向会很棒.

Answer 1

我考虑过删除这个问题,但认为答案可能对寻找可能解决方案的其他人(比如我)有用.

我想留在Bootstrap 3框架内......最后添加一些JavaScript以使"标题"居中.我认为Bootstrap 3基本上需要jQuery来实现某些功能,所以没关系.

现在,我确信可能有更好的方法,但我不喜欢其他解决方案.感谢所有试图让我走上正确道路的人.

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(使用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');
}
});

注意:"sep_height"只是为了让我不进行不必要的计算,只在需要时修改标题高度.我还在顶部边距添加了额外的5px来补偿描述文本的边距.

这是最新的小提琴(修复onLoad事件):http://jsfiddle.net/E6LcY/15/

再次感谢所有帮助过的人.