在四年的时间内回到网页开发之后,我有一个艰难的时刻将引导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/
再次感谢所有帮助的人.