Bootstrap - 将 DIV 与顶部、中间和底部对齐

Question

我需要在一个容器 DIV 中放置三个 DIV，它们都水平居中。第一个需要与容器的垂直顶部对齐，第二个需要与垂直中心对齐，第三个需要与垂直底部对齐。这里是an answer to position a div vertically, but doesn't address other items. Another answer here，但是如何添加需要垂直对齐到顶部和底部的DIV？

这是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>

Answer 1

为此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>

这个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%); 
}

见this Bootply Demo

HTH！

Bootstrap - 将 DIV 与顶部、中间和底部对齐

Bootstrap - Align DIVs to top, middle, and bottom

html

css

twitter-bootstrap

twitter-bootstrap-3