Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Boris Kamp
Boris Kamp
16,660 Points

vertical alignment of div

I tried several methods of vertical aligning my div inside another div. I want the div to be in the middle! I just can't seem to get it done, here is my code:

```<div class="row">

          <div class="col-xs-9 title-blogpost">
            <h1><?php the_title(); ?></h1>
          </div>
          <div class="col-xs-3">
            <img class="img-circle img-responsive" src="<?php echo $thumbnail_url[0]; ?>" alt="<?php echo $thumbnail_meta; ?>"></p>
         </div>
        </div>```

The title-blogpost classed div needs to be vertically aligned in the row classed div. the row classed div's height is defined by the image in the col-xs-3 classed div.

Thanks!

2 Answers

James Finn
James Finn
7,055 Points

Actually, Boris, you're right! I looked into it. That code doesn't work. (For me, anyway) The reason is:

The translate and position properties offset elements in totally different ways! The translate property value, when set to a percentage, refers to the size of the element selected (its width, for translateX, and its height, for translateY). The position property offset (top, bottom, etc) values, when set to a percentage, refers to the element's parent. Big difference! That's why that code doesn't work.

One solution I use for vertical centering can be found here. View source to see how the div is centered in its parent, in this case the viewport, no matter what size the viewport is. You can apply this trick to any absolutely positioned element within a relatively positioned parent. Enjoy.

The key css follows:

div{
   position:absolute;
   top:0;
   bottom:0;
   right:0;
   left:0;
   margin:auto;
}

Bam!

Boris Kamp
Boris Kamp
16,660 Points

Thanks James! That clears up a lot. I changed my header design by now, so no need for it anymore on my current programma. BUT I will use it for sure in other projects!! Thanks again!

Alexander Handler
seal-mask
.a{fill-rule:evenodd;}techdegree
Alexander Handler
Full Stack JavaScript Techdegree Student 14,567 Points
Alexander Handler
.a{fill-rule:evenodd;}techdegree
Alexander Handler
Full Stack JavaScript Techdegree Student 14,567 Points

Hey Boris,

Snippetrepo has a small snippet that I've used in the past to vertically align elements.

http://snippetrepo.com/snippets/vertical-align-anything-with-3-lines-of-css

Hope this is a good start!

Alex

James Finn
James Finn
7,055 Points

That's cool :)

Boris Kamp
Boris Kamp
16,660 Points

I found that code as well, but it does not work for me. It only works if I give my parent div a specific height.... And I dont want that. The parent div's height is defined by the image inside of the other div....

Is there A way to solve this? or do I need to give it a specific height and start to work with media queries to shrink it down?

James Finn
James Finn
7,055 Points

See below. . .