7

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 answer to 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?

Here's the 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>
Community
  • 1
  • 1
Alex
  • 34,699
  • 13
  • 75
  • 158
  • Do you have a specified height for the container div? If it will be variable based on the interior divs then you would simply give each interior div a 100% width. – Matt Whiteley Mar 25 '15 at 14:37
  • The container DIV (`carousel-caption`) has `width: 90%` and `height: 90%`. – Alex Mar 25 '15 at 14:41

1 Answers1

10

For this 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:

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

See this Bootply Demo

HTH!

Ted
  • 14,757
  • 2
  • 41
  • 58
  • Thanks, @Ted. How does this code work? What do the `translateY(-50%)` and `translateY(-100%)` do? – Alex Mar 25 '15 at 14:44
  • 2
    The top 50% puts the top of the middle div at 50% of the height of the container, then the translateY(-50%) moves it up 50% of the height of the div, thus positioning it directly in the middle. The top of the bottom div would be at the very bottom of the container, so the translateY(-100%) moves it up 100% of the height of the div so it is exactly at the bottom. Great solution. – Matt Whiteley Mar 25 '15 at 14:49
  • 1
    @Alex - Looks like Matt explained it quite nicely. :) – Ted Mar 25 '15 at 14:55
  • I'm using this inside a Bootstrap template. One issue I've noticed is that the 3 divs change vertical positions when you resize the browser window (especially to the iPhone 5 screen). Any thoughts? – Alex Mar 25 '15 at 16:50
  • 1
    Setting `position: absolute;` on .vcenter and .vbottom fixed the issue of stuff going out of whack on small vs. large screens. – Alex Mar 25 '15 at 17:21
  • This doesn't seem to work if I nest the vbottom class. Can someone explain why this doesn't work, and why it actually gives the exact opposite result of what I want? My navigation div ends up ABOVE its containing div instead of bottom aligned. [Bootply Demo](https://www.bootply.com/NWUBntlKHA) – Bpainter Jun 13 '17 at 19:15