Html Bootstrap - 将 DIV 与顶部、中间和底部对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29258382/
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
Bootstrap - Align DIVs to top, middle, and bottom
提问by Alex
I need to have three DIVs in a container DIV, all centered horizontally. The first needs to align to the vertical top of the container, the second to the vertical center, and the third to the vertical bottom. Here's an answerto position a div vertically, but doesn't address other items. Another answer here, but how would you add the DIVs that need to be aligned vertically to top and bottom?
我需要在容器 DIV 中有三个 DIV，它们都水平居中。第一个需要与容器的垂直顶部对齐，第二个需要与垂直中心对齐，第三个需要与垂直底部对齐。这是垂直定位 div的答案，但不涉及其他项目。这里的另一个答案，但是您将如何添加需要垂直对齐到顶部和底部的 DIV？
Here's the HTML:
这是 HTML：
<div class="carousel-caption"> <!-- outer container; all items horizontally centered -->
<div class="row align-top"> <!-- align this DIV to top -->
<h1 class="col-sm-12">Top DIV</h1>
</div>
<div class="row align-vertical-center"> <!-- align this DIV to center -->
<div class="col-sm-12 ">Middle DIV</div>
</div>
<div class="row align-vertical-bottom">
<div class="align-vertical-bottom">Bottom DIV</div>
</div>
</div>
回答by Ted
For this HTML:
对于此 HTML：
<div class="container">
<div class="carousel-caption"> <!-- outer container; all items horizontally centered -->
<div class="row vtop"> <!-- align this DIV to top -->
<div class="col-sm-12">Top DIV</div>
</div>
<div class="row vcenter"> <!-- align this DIV to center -->
<div class="col-sm-12 ">Middle DIV</div>
</div>
<div class="row vbottom">
<div class="col-sm-12 vbottom">Bottom DIV</div>
</div>
</div>
</div>
This CSS:
这个CSS：
.carousel-caption{
padding:0;
}
.vtop{
/*padding on parent fixes this*/
}
.vcenter{
position: relative;
top: 50%;
transform: translateY(-50%);
}
.vbottom{
position: relative;
top: 100%;
transform: translateY(-100%);
}
HTH!
哼！
