垂直对齐
是否有在引导元件或文本的垂直对齐任何变通跨度相对于其他跨度垂直对齐
对于如。如果我有一个行和跨度这样
<div class="row-fluid">
<div class="span3" style="background-color:lightblue">Description</div>
<div class="span9" style="background-color:pink">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum ....
</div>
</div>
它看起来像这样
那么，有没有一种方式来显示下一个跨度的高度的“说明”垂直居中？
如果你想垂直居中的元素，你可以随时使用媒体查询某些屏幕尺寸如：
/*tablet*/
@media (min-width: 768px) and (max-width: 979px) {
#logo{
margin-top:70px;
}
}
/*desktop*/
@media (max-width: 979px) {
#logo{
margin-top:20px;
}
}
/*large desktop*/
@media (min-width: 1200px) {
#logo{
margin-top:0;
}
}
$('.row').each(function() {
var rowHeight = $(this).height();
$(this).find("[class^='span']").each(function() {
if ($(this).height() < rowHeight-20) {
var odstep = (rowHeight - $(this).height())/2 ;
$(this).css("padding-top", odstep);
}
});
});
你可以尝试一些absolute centering tricks with CSS。例如，如果您愿意：1）宣布div的高度居中，并且2）制作您的.row-fluidposition: relative;或者this sample could work for you。
导致以下DOM：
<div class="row-fluid relative">
<div class="span3">
<div class="vercenter" style="background-color:lightblue">Description</div>
</div>
<div class="span9" style="background-color:pink">Lorem Ipsum...</div>
</div>
和CSS：
.relative {
position: relative;
}
.vercenter {
height: 1.5em;
margin: auto;
left: 0;
top: 0;
bottom: 0;
position: absolute;
}
我做了很多这一点，并通过使用jquery一个简单的解决方案如下所示！
<script>
$(document).ready(function(){
var relheight=$('.span9').height()/2;
$('.span3').css('margin-top', relheight) ;
});
</script>
它的工作原理，我也测试了它。如果你喜欢我的回答，请投我一票
你应该计算relheight为'var relheight =（$（'。 span（'）。$（'。span3'）。height（））/ 2;'垂直居中'.span3'的内容 – steakchaser
在Bootstrap中没有关于这个问题的规定。 它是植入依赖。 但是，你可以写一个CSS规则，说如果下一个div超过前一个div的高度，则将前一个div与下一个div的中心高度对齐。&将此类应用到需要此类行为的div。
看看这个无脚本的解决方案。
<div class="row-fluid">
<div class="span3" style="background-color:lightblue;margin:0px auto;float:none;">Description</div>
<div class="span9" style="background-color:pink;clear:both;margin:0px auto;float:none;">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum ....
</div>
</div>
在行动中的代码：jsFiddle
只需卸下联样式，并将其放置在你的CSS文件。
如果你知道或解决这两个跨越的高度，那么你可以试试这个[的jsfiddle]（http://jsfiddle.net/Sherbrow/ J6m8v /）。否则，您可能会查看表格或表格式的显示。 – Sherbrow
可能重复的[垂直中心在Twitter引导]（http://*.com/questions/31808445/vertically-center-in-twitter-bootstrap） – pbenard