Html 垂直对齐：中间与 Bootstrap 2
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11592306/
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
vertical-align: middle with Bootstrap 2
提问by bgondy
I use the twitter bootstrap and I wanted to align verticaly a divblock with a picture and the text at the right.
我使用 twitter bootstrap，我想将一个div块与图片和右侧的文本垂直对齐。
Here is the code:
这是代码：
<ol class="row" id="possibilities">
<li class="span6">
<div class="row">
<div class="span3">
<p>some text here</p>
<p>Text Here too</p>
</div>
<figure class="span3"><img src="img/screenshots/options.png" alt="Some text" /></figure>
</div>
</li>
<li class="span6">
<div class="row">
<figure class="span3"><img src="img/qrcode.png" alt="Some text" /></figure>
<div class="span3">
<p>Some text</p>
<p>Some text here too.</p>
</div>
</div>
</li>
</ol>
I tried this but not wortks:
我试过这个但不工作：
.span6 .row{display: table;}
.span6 .row .span3, .span6 .row figure{display:table-cell; vertical-align: middle;}
I tried this too:
我也试过这个：
.span6 .row .span3{display: inline-block; vertical-align: middle;}
None is working. Does somebody have an idea? Thanks in advance.
没有一个在工作。有人有想法吗？提前致谢。
采纳答案by Skrivener
Try this:
尝试这个：
.row > .span3 {
display: inline-block !important;
vertical-align: middle !important;
}
Edit:
编辑：
Fiddle: http://jsfiddle.net/EexYE/
小提琴：http: //jsfiddle.net/EexYE/
You may need to add Diego's float: none !important;also if span3 is floating and it interferes.
float: none !important;如果 span3 是浮动的并且会干扰，您可能还需要添加 Diego 的。
Edit:
编辑：
Fiddle: http://jsfiddle.net/D8McR/
小提琴：http: //jsfiddle.net/D8McR/
In response to Alberto: if you fix the height of the row div, then to continue the vertical center alignment you'll need to set the line-height of the row to be the same as the pixel height of the row (ie. both to 300px in your case). If you'll do that you will notice that the child elements inherit the line-height, which is a problem in this case, so you will then need to set your line height for the span3s to whatever it should actually be (1.5 is the example value in the fiddle, or 1.5 x the font-size, which we did not change when we changed the line-height).
回应 Alberto：如果您固定行 div 的高度，那么要继续垂直居中对齐，您需要将行的行高设置为与行的像素高度相同（即两者）在您的情况下为 300px）。如果你这样做，你会注意到子元素继承了行高，这在这种情况下是一个问题，所以你需要将 span3s 的行高设置为实际应该是的任何值（1.5 是小提琴中的示例值，或 1.5 x 字体大小，当我们改变行高时我们没有改变）。
回答by Diego Sanches
Try removing the floatattribute from span6:
尝试float从 span6 中删除该属性：
{ float:none !important; }
回答by Thomas.Donnelly
As well as the previous answers are you could always use the Pull attrib as well:
除了之前的答案之外，您还可以随时使用 Pull 属性：
<ol class="row" id="possibilities">
<li class="span6">
<div class="row">
<div class="span3">
<p>some text here</p>
<p>Text Here too</p>
</div>
<figure class="span3 pull-right"><img src="img/screenshots/options.png" alt="Some text" /></figure>
</div>
</li>
<li class="span6">
<div class="row">
<figure class="span3"><img src="img/qrcode.png" alt="Some text" /></figure>
<div class="span3">
<p>Some text</p>
<p>Some text here too.</p>
</div>
</div>
</li>
回答by grandivory
If I remember correctly from my own use of bootstrap, the .spanNclasses are floated, which automatically makes them behave as display: block. To make display: table-cellwork, you need to remove the float.
如果我自己使用 bootstrap 没记错的话，这些.spanN类是浮动的，这会自动使它们表现为display: block. 为了display: table-cell工作，你需要移除浮动。
回答by atabak
i use this
我用这个
<style>
html, body{height:100%;margin:0;padding:0 0}
.container-fluid{height:100%;display:table;width:100%;padding-right:0;padding-left: 0}
.row-fluid{height:100%;display:table-cell;vertical-align:middle;width:100%}
.centering{float:none;margin:0 auto}
</style>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="offset3 span6 centering">
content here
</div>
</div>
</div>
</body>
