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 henriquegiuliani
henriquegiuliani
12,296 Points

Why is this happening??? :/

I am trying to study CSS Basics by challenging myself to create a fluid layout and i'm using almost everything learned until now. But i'm facing a problem by keeping my logo H1 and menu aligned vertically.

I've tried to display it like table, inline-block, etc... I'm trying to avoid using margin-top to adjust it manually...

The code: http://codepen.io/henvoni/pen/pbWJbX

Thanks a lot in advance.

Jacob Mishkin
Jacob Mishkin
23,118 Points

what do you mean vertically? you mean centered, or at the top of the header div?

henriquegiuliani
henriquegiuliani
12,296 Points

Both centered vertically... If you see the codepen result, you can notice that the H1 logo is already centered vertically, but the nav isn't... :/

Jacob Mishkin
Jacob Mishkin
23,118 Points

you want the nav to display vertically? Or centered in the middle of the header?

5 Answers

Jacob Mishkin
Jacob Mishkin
23,118 Points 
.nav {
margin-top: .5em; //this is a cheap eye ball way 

vertical-align: middle //this should work 

}

either way it should work, also use the dev tool to play around with the height of the nav.

Jacob Mishkin
Jacob Mishkin
23,118 Points

I prefer to use em's over px's but its really up to you. here is a great article on em units :

em units

henriquegiuliani
henriquegiuliani
12,296 Points
henriquegiuliani
henriquegiuliani
12,296 Points

No, center it vertically inside the menu bar ( which is not right now ).

Jacob Mishkin
Jacob Mishkin
23,118 Points

you can try either margin-top, or vertical-align, those are my two suggestions to have the nav be aligned in the middle of the div.

henriquegiuliani
henriquegiuliani
12,296 Points
henriquegiuliani
henriquegiuliani
12,296 Points

could you show me in a snippet please? Because i tried both your suggestions but it is not working :/

henriquegiuliani
henriquegiuliani
12,296 Points
henriquegiuliani
henriquegiuliani
12,296 Points

I've made it with the eye ball way.. because vertical-align is not working.. but thanks!!

Jacob Mishkin
Jacob Mishkin
23,118 Points

cool!

henriquegiuliani
henriquegiuliani
12,296 Points
henriquegiuliani
henriquegiuliani
12,296 Points

Jacob, one more question... since i'm using the eyeball method for centering, do you recommend me using EM or Pixels? Does it matter?

*Please make an answer response so i can flag it "Best Response".. you deserve it.