垂直对齐Bootstrap 3列的内容 [英] Vertically align content of Bootstrap 3 column
问题描述
在经过四年的休息后回到网站开发后，我遇到了一个艰难的时刻，将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>页标题< / div>
< div class =col-md-10 col-sm-10 col-xs-9 page-header-seperator>
< div class =page-header-description>< small>标准文字说明< / small>< / div>
< div class =page-header-alt>< small>附加文字说明< / 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的一些功能，所以它是好的。
现在，我相信可能有一个更好的方法，但我不喜欢其他解决方案。
<$ c> $ c>< div class =row page-header-box>
< div class =col-md-2 col-sm-2 col-xs-3 page-header-titleid =header-title>页标题< / div>
< div class =col-md-10 col-sm-10 col-xs-9 page-header-seperatorid =header-seperator>
< div class =page-header-description>< small>标准文本说明标准文本说明标准文本说明标准文本说明标准文本说明< / small&
< div class =page-header-alt>< small>附加文字说明< / 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/
再次感谢所有帮助过的人。
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.
解决方案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.
这篇关于垂直对齐Bootstrap 3列的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
