It would be a lot easier not to use floats on the list items / links but use inline-block. All you would have to do then is put text-align:center on the ul.
Here's a basic one where I was just tinkering with JS...you can ignore that part.
The reason I used floats is because it allows for dynamic <li> elements to be added without having a known width for the parent, for text-align to work you generally need a known width on the parent element otherwise it aligns to the left side of the parent.
I tried everything but I can't get this to work... How can I center my .navigation div in my #header div? Please help!
The code on CodePen: http://codepen.io/Jochim/pen/dsolb
See how the following goes for you.
http://codepen.io/ChrisUpjohn/pen/IByiz
I think there is no need for styling with relative and absolute positioning until the
tags. Until then margins and padding should be used for alignment.Then centering the ul horizontally in the div.navigation will be as follows: div.navigation ul{margin: 0 auto;}
It would be a lot easier not to use floats on the list items / links but use inline-block. All you would have to do then is put text-align:center on the ul.
Here's a basic one where I was just tinkering with JS...you can ignore that part.
http://codepen.io/Paulie-D/pen/8f4c32507c84075b9b1d1ad61d2c9cc6
The reason I used floats is because it allows for dynamic
<li>elements to be added without having a known width for the parent, fortext-alignto work you generally need a known width on the parent element otherwise it aligns to the left side of the parent.that's true of justify, but not center