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 Spen Taylor
Spen Taylor
13,027 Points

Vertical positioning

Hi

I understand that vertical positioning with CSS isn't so straight forward as maybe it should be.

I'm trying to set up a fixed title & navigation bar similar to the one at the top of this page. I've currently got it looking good and well with the navigation links aligned to the middle of the bar (vertically) but I've done it in what seems to be a bit of a bodge way.

I currently have a nav bar div that sits inside of the header div.

The nav bar div is set to a top position of -10px which just so happens to position the links centrally.

My worry is that if I change the font (which I plan to do so after buying the web licence for a display font) that this -10px offset will not have the same effect due to the different size of the font.

I'd like to know if there is a better way to position each link so that no matter how large the font size, or how large the header div is, the links always adjust nicely to the centre

Any ideas?

I hope this all makes sense :/

2 Answers

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

It's going to need tweaking from font to font but you could try positioning the actual links themselves rather then using the div's positioning to move things.

Set the link elements margins so that they sit in the middle of the bar or vertical-align:middle;

That should align in to the middle of the navBar div.

Also, are you using spaces in your div id's and classes?

Spen Taylor
Spen Taylor
13,027 Points
Spen Taylor
Spen Taylor
13,027 Points

Thanks for the reply Matt, I'm not using spaces no, just wrote it that way here, for some silly reason :P

I didn't think about using top and bottom margins, maybe auto margins will work? Ill give it a go when I'm home this eve!