CSS 如何在引导程序中使用垂直对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18192114/
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
How to use vertical align in bootstrap
提问by alias51
Simple problem: How do I vertically align a col within a col using bootstrap? Example here (I want to vertically align child1a and child1b):
简单问题：如何使用 bootstrap 在 col 中垂直对齐 col？示例在这里（我想垂直对齐 child1a 和 child1b）：
HTML
HTML
<div class="col-lg-12">
<div class="col-lg-6 col-md-6 col-12 child1">
<div class="col-12 child1a">Child content 1a</div>
<div class="col-12 child1b">Child content 1b</div>
</div>
<div class="col-lg-6 col-md-6 col-12 child2">
Child content 2<br>
Child content 2<br>
Child content 2<br>
Child content 2<br>
Child content 2<br>
</div>
</div>
UPDATE
更新
Some CSS:
一些CSS：
.col-lg-12{
top:40px;
bottom:0px;
border:4px solid green;
}
.child1a, .child1b{
border:4px solid black;
display:inline-block !important;
}
.child1{
border:4px solid blue;
height:300px;
display:table-cell !important;
vertical-align:middle;
}
.child2{
border:4px solid red;
}
回答by magirtopcu
.parent {
display: table;
table-layout: fixed;
}
.child {
display:table-cell;
vertical-align:middle;
text-align:center;
}
table-layout: fixedprevents breaking the functionality of the col-* classes.
table-layout: fixed防止破坏 col-* 类的功能。
回答by prinsen
Maybe an old topic but if someone needs further help with this do the following for example (this puts the text in middle line of image if it has larger height then the text).
也许是一个老话题，但如果有人需要进一步的帮助，请执行以下操作，例如（如果文本的高度大于文本，则将文本放在图像的中间行）。
HTML:
HTML：
<div class="row display-table">
<div class="col-xs-12 col-sm-4 display-cell">
img
</div>
<div class="col-xs-12 col-sm-8 display-cell">
text
</div>
</div>
CSS:
CSS：
.display-table{
display: table;
table-layout: fixed;
}
.display-cell{
display: table-cell;
vertical-align: middle;
float: none;
}
The important thing that I missed out on was "float: none;" since it got float left from bootstrap col attributes.
我错过的重要事情是“浮动：无；” 因为它从 bootstrap col 属性中获得了浮动。
Cheers!
干杯!
回答by lharby
For the parent: display: table;
对于家长： display: table;
For the child: display: table-cell;
对于孩子： display: table-cell;
Then add vertical-align: middle;
然后加 vertical-align: middle;
I can make a fiddle but home time now, yay!
我可以拉小提琴，但现在是回家的时间，耶！
OK here is the lovely fiddle: http://jsfiddle.net/lharby/AJAhR/
好的，这里是可爱的小提琴：http: //jsfiddle.net/lharby/AJAhR/
.parent {
display:table;
}
.child {
display:table-cell;
vertical-align:middle;
text-align:center;
}
回答by southz rgw
I had to add width: 100%; to display table to fix some strange bahavior in IE and FF, when i used this example. IE and FF had some problems displaying the col-md-* tags at the right width
我不得不添加宽度：100%; 当我使用这个例子时，显示表格以修复 IE 和 FF 中的一些奇怪的行为。IE 和 FF 在以正确的宽度显示 col-md-* 标签时遇到了一些问题
.display-table {
display: table;
table-layout: fixed;
width: 100%;
}
.display-cell {
display: table-cell;
vertical-align: middle;
float: none;
}
回答by Chris Moschini
http://jsfiddle.net/b9chris/zN39r/
http://jsfiddle.net/b9chris/zN39r/
HTML:
HTML：
<div class="item row">
<div class="col-xs-12 col-sm-6"><h4>This is some text.</h4></div>
<div class="col-xs-12 col-sm-6"><h4>This is some more.</h4></div>
</div>
CSS:
CSS：
div.item div h4 {
height: 60px;
vertical-align: middle;
display: table-cell;
}
Important notes:
重要笔记：
- The
vertical-align: middle; display: table-cell;must be applied to a tag that has no Bootstrap classes applied; it cannot be acol-*, arow, etc. - This can't be done without this extra, possibly pointless tag in your HTML, unfortunately.
- The backgrounds are unnecessary - they're just there for demo purposes. So, you don't need to apply any special rules to the
roworcol-*tags. - It is important to notice the inner tag does not stretch to 100% of the width of its parent; in our scenario this didn't matter but it may to you. If it does, you end up with something closer to some of the other answers here:
- 在
vertical-align: middle; display: table-cell;必须适用于已应用没有自举类标签; 它不能是 acol-*、 arow等。 - 不幸的是，如果 HTML 中没有这个额外的、可能毫无意义的标签，就无法做到这一点。
- 背景是不必要的——它们只是为了演示目的。因此，您不需要对
roworcol-*标签应用任何特殊规则。 - 重要的是要注意内部标签不会拉伸到其父标签宽度的 100%；在我们的场景中，这无关紧要，但可能对您而言。如果是这样，你最终会得到更接近这里其他一些答案的东西：
http://jsfiddle.net/b9chris/zN39r/1/
http://jsfiddle.net/b9chris/zN39r/1/
CSS:
CSS：
div.item div {
background: #fdd;
table-layout: fixed;
display: table;
}
div.item div h4 {
height: 60px;
vertical-align: middle;
display: table-cell;
background: #eee;
}
Notice the added table-layout and display properties on the col-*tags. This must be applied to the tag(s) that have col-*applied; it won't help on other tags.
注意col-*标签上添加的表格布局和显示属性。这必须应用于已col-*应用的标签；它对其他标签没有帮助。
回答by Z3NF1N1TY
Prinsen's answer is the best choice. But, to fix the issue where the columns don't collapse his code needs to be surrounded by a media check statement. This way these styles are only applied when the larger columns are active. Here is the updated complete answer.
普林森的回答是最好的选择。但是，要解决列不折叠的问题，他的代码需要被媒体检查语句包围。这样，这些样式仅在较大的列处于活动状态时应用。这是更新的完整答案。
HTML:
HTML：
<div class="row display-table">
<div class="col-xs-12 col-sm-4 display-cell">
img
</div>
<div class="col-xs-12 col-sm-8 display-cell">
text
</div>
</div>
CSS:
CSS：
@media (min-width: 768px){
.display-table{
display: table;
table-layout: fixed;
}
.display-cell{
display: table-cell;
vertical-align: middle;
float: none;
}
}
回答by da-hype
You mean you want 1band 1bto be side by side?
你的意思是你想让1b和1b并排？
<div class="col-lg-6 col-md-6 col-12 child1">
<div class="col-6 child1a">Child content 1a</div>
<div class="col-6 child1b">Child content 1b</div>
</div>
回答by Avishai
With Bootstrap 4, you can do it much more easily: http://v4-alpha.getbootstrap.com/layout/flexbox-grid/#vertical-alignment
使用 Bootstrap 4，您可以更轻松地完成此操作：http: //v4-alpha.getbootstrap.com/layout/flexbox-grid/#vertical-alignment
