Html 在 Bootstrap 中垂直居中两个 <div class="span6">
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16682346/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertically centering two <div class="span6">'s within Bootstrap
提问by Walker
EDIT: Just wanted to clarify that these spans have unknown height (because of responsiveness)!
编辑：只是想澄清这些跨度的高度未知（因为响应能力）！
I'm trying to vertically align two <div class="span6">'s within a <div class="row">in Bootstrap and I'm having problems using any of my usual tricks, such as display: inline-block;or display: table-cell;(here's the JSFiddle I was working on: http://jsfiddle.net/mA6Za/).
我正在尝试在 Bootstrap 中垂直对齐<div class="span6">a<div class="row">中的两个，但我在使用任何常用技巧时遇到问题，例如display: inline-block;or display: table-cell;（这是我正在研究的 JSFiddle：http: //jsfiddle.net/mA6Za/） .
Here's what I was trying to use, which does not work in Bootstrap:
这是我尝试使用的，但在 Bootstrap 中不起作用：
<div class="container">
<div class="row" style="display: table">
<div class="span6" style="height: 300px; background: red; display: table-cell !important; vertical-align: middle;">
Block 1 - Vertically center me please!
</div>
<div class="span6" style="height: 170px; background: blue; display: table-cell !important; vertical-align: middle;">
Block 2- Center me too
</div>
</div>
</diV>
Is it possible to vertically align these two .span6's such that both the height of Block1and Block2are unknown? I'd like to use Bootstrap because of the responsible features, but for tablet+ we'd like the content to vertically align.
是否有可能垂直对齐这两个.span6的，使得两者的高度Block1和Block2未知？由于负责任的功能，我想使用 Bootstrap，但对于平板电脑+，我们希望内容垂直对齐。
回答by Mathijs Flietstra
I don't think you're making very clear if you want the content of the div'sto be vertically centered or the actual div's themselves. Anyway, there's a solution to both options:
我不认为你正在做很清楚，如果你想要的内容div的，以垂直居中或实际div的自己。无论如何，这两种选择都有解决方案：
Vertically centering the actual div's
垂直居中实际div的
First a solution which vertically aligns the div's: jsFiddle
首先是垂直对齐的解决方案div：jsFiddle
It works by setting display: table;on .containerand display: table-cell;on .row. Once that is done you can set vertical-align: middle;on .rowto vertically center its content.
它通过设置display: table;on.container和display: table-cell;on 来工作.row。一旦做到这一点，你可以设置vertical-align: middle;在.row垂直居中其内容。
I have also had to manually force the width of .rowto be 960px, this is not very responsive (you could fix that using media queries), but the margin-leftof -20pxwhich Bootstrap sets on .rowdoesn't work after setting display: table-cell;on .row. Not forcibly adding these extra 20pxwould result in the second divending up below the first because they won't both fit together on the same line anymore. I have set some height: 100%;'s on all elements for demonstration purposes.
我也有手动强制的宽度.row是960px，这是不是非常敏感（你可以修复使用媒体查询），但margin-left中-20px上引导台.row设置后不能正常工作display: table-cell;的.row。不强行添加这些额外内容20px会导致第二个结果div低于第一个，因为它们不再在同一条线上组合在一起。height: 100%;出于演示目的，我在所有元素上设置了 some 。
CSS
CSS
.container {
margin-top: 10px;
display: table;
height: 100%;
}
.row {
min-width: 960px;
display: table-cell;
height: 100%;
vertical-align:middle;
}
Vertically centering the div's contents
垂直居中div的内容
If you wanted to vertically center the content of the div's, you can do that by setting display: table;on .rowand setting display: table-cell;on .span6. You'd also need to get rid of float: left;on .span6by setting it to float: none.
如果您想垂直居中div's的内容，您可以通过设置display: table;on.row和设置display: table-cell;on 来实现.span6。你还就需要摆脱float: left;对.span6将其设置为float: none。
Here's a fiddle demonstrating this option: jsFiddle
这是演示此选项的小提琴： jsFiddle
回答by user2019515
Since you are using a fixed height and only a single line you can easily use line-heightfor this.
由于您使用的是固定高度且只有一条线，因此您可以轻松地使用line-height它。
.span6:first-child{
line-height:300px;
}
.span6{
line-height:170px;
}
See fiddle: http://jsfiddle.net/mA6Za/1/
见小提琴：http: //jsfiddle.net/mA6Za/1/
回答by Taw
try doing this http://jsfiddle.net/mA6Za/2/
尝试这样做http://jsfiddle.net/mA6Za/2/
<div class="container">
<div class="row" style="display: table">
<div class="span6" style="height: 300px; background: red; display: table-cell !important; position: absolute; top: 50%; margin-top: -150px; ">
Block 1 - Vertically center me please!
</div>
<div class="span6 offset6" style="height: 170px; background: blue; display: table-cell !important; vertical-align: middle; top: 50%; margin-top: -85px ; position: absolute " >Block 2- Center me too
</div>
</div>
</div>
回答by sellmeadog
UPDATE
更新
So I was wrong, my original answer doesn't work and here's why. Bootstrap is still applying a float: leftto all <div class="span*">elements.
所以我错了，我原来的答案不起作用，这就是原因。Bootstrap 仍然将 afloat: left应用于所有<div class="span*">元素。
/* From Bootstrap; some differences based on media query */
[class*="span"]
{
float: left;
min-height: 1px;
margin-left: 30px;
}
You can override these rules by making the following change to the .cellstyle from my original answer:
您可以通过对.cell我的原始答案中的样式进行以下更改来覆盖这些规则：
.cell
{
display: table-cell;
float: none;
vertical-align: middle;
}
However, you'll then lose the responsive "stacking" of the elements on small screens (which I don't think you want) and instead retain the "table" appearance. To prevent this from happening, you will most likely have to make the display: table; float: none;style conditional with your own media queries.
但是，您将失去小屏幕上元素的响应“堆叠”（我认为您不想要），而是保留“表格”外观。为了防止这种情况发生，您很可能必须display: table; float: none;使用自己的媒体查询使样式成为条件。
Even still, the intent of Bootstrap was not to display content as a CSS table so by overriding styles to do so, you risk introducing other "bugs" into your display.
尽管如此，Bootstrap 的目的并不是将内容显示为 CSS 表，因此通过覆盖样式来这样做，您可能会在显示中引入其他“错误”。
Here's an updated fiddle to review: http://jsfiddle.net/7Y8Jv/3/
这是要的更新小提琴：http: //jsfiddle.net/7Y8Jv/3/
ORIGINAL ANSWER
原答案
Is this what you're looking for: http://jsfiddle.net/7Y8Jv/1/?
这是您要查找的内容：http: //jsfiddle.net/7Y8Jv/1/吗？
My markup and styles don't look much different than yours, but I'm getting the vertical centering you're asking for.
我的标记和样式看起来与你的没有太大不同，但我得到了你所要求的垂直居中。
Markup
标记
<div class="container">
<div class="row table">
<div class="span6 cell">What Is Lorem Ipsum?</div>
<div class="span6 cell">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>
</div>
CSS
CSS
.table
{
display: table;
}
.cell
{
display: table-cell;
vertical-align: middle;
}
回答by yeyene
Use some tricks with jquery...
使用 jquery 的一些技巧...
1) get the span height with id
1) 使用 id 获取跨度高度
2) do some math for margin top
2）为边距顶部做一些数学运算
3) then, set css
3）然后，设置css
It also works on window resize.
它也适用于窗口大小调整。
DEMO on jsfiddle...http://jsfiddle.net/q49Da/
jsfiddle 上的演示... http://jsfiddle.net/q49Da/
HTML
HTML
<div class="container">
<div class="row">
<div id="red" class="span6" style="background: red;width:40%;float:left;margin-right:5%;">
Block 1 - Vertically center me please!<br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div id="blue" class="span6" style="background: blue;width:40%;float:left;">
Block 2- Center me too<br />
Contrary to popular belief, Lorem Ipsum is not simply random text.
</div>
</div>
</div>
JQUERY
查询
$(document).ready(function() {
var ver_top = ($(window).height() - $('#red').height()) / 2;
$('#red').css( "margin-top", ver_top+'px' );
var ver_top2 = ($(window).height() - $('#blue').height()) / 2;
$('#blue').css( "margin-top", ver_top2+'px' );
$(window).resize(function(){
var ver_top = ($(window).height() - $('#red').height()) / 2;
$('#red').css( "margin-top", ver_top+'px' );
var ver_top2 = ($(window).height() - $('#blue').height()) / 2;
$('#blue').css( "margin-top", ver_top2+'px' );
});
});
回答by pickypg
It sounds like you want two rows with each row taking half of the screen.
听起来你想要两行，每行占据屏幕的一半。
Why not use the offset3to shift over your row a quarter of the way (thus putting it where you want it), and then still use span6in two separate rows:
为什么不使用 将offset3您的行移动四分之一（从而将其放在您想要的位置），然后仍然span6在两个单独的行中使用：
<div class="container">
<div class="row">
<div class="offset3 span6">Block 1 - Vertically center me please!</div>
</div>
<div class="row">
<div class="offset3 span6">Block 2- Center me too</div>
</div>
</diV>
JSFiddle: http://jsfiddle.net/mA6Za/3/
JSFiddle：http: //jsfiddle.net/mA6Za/3/
