css – 垂直对齐Bootstrap 3列的内容

在四年的时间内回到网页开发之后,我有一个艰难的时刻将引导3列的内容与下一列垂直对齐.我已经尝试搜索这个网站以及一般的搜索,只是没有提出正确的解决方案…或我的搜索字词很差.

在下面的HTML / CSS中,我想垂直居中在左栏的“页面标题”文本.我想保持HTML和CSS尽可能简洁,而使用Bootstrap 3 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/

这是我曾经发布的几次之一,所以指向正确的方向将是伟大的.

解决方法

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

我想保持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/

再次感谢所有帮助的人.

原文地址：https://www.jb51.cc/css/216555.html