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 How to Make a Website Customizing Colors and Fonts Resize Text

Posted by Danny van Benthem
Danny van Benthem
Courses Plus Student 2,342 Points

float instead of display-inline?

In the video he uses display-inline on the "li" of the "nav". Then he uses the "text-align: center" on the ul to center te "nav". I personaly don't like the gaps between the "li's" and i want to use the float property. But when i use the "float: left" on the "li's" the "ul" of the nav doesn't align to the center. Can anyone explain this to me and give a solution?

Gr Danny

2 Answers

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi Danny,

There is a very simple trick you can use for removing the space on inline and inline-block elements which involves setting the parent font-size to 0 which makes everything font wise disappear but it's an easy fix, all you simply need to do is reset the font-size on the children and you're all set.

See the below pen for a demo of how this works.

http://codepen.io/ChrisUpjohn/pen/DuLCa

Source: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Why don't floats let you center children?

Floats change the flow of the page so when you set the text-align property to center on the parent it will has no affect because elements outside the normal flow don't inherit alignment properties from the parent except on the textNode which is the content/text inside the child.

There are ways you can get around this but I've found them to be too cumbersome as they typically require JavaScript therefore I opt to go with the pure CSS approach like the example in the pen.

Hope that helps.

Danny van Benthem
PLUS
Danny van Benthem
Courses Plus Student 2,342 Points
Danny van Benthem
Danny van Benthem
Courses Plus Student 2,342 Points

Hello Chris,

Thanx for your reply. It is indeed a simple solution. And i now understand why floats doesn't work on the parent.

Thank you:)