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 trialDanny van Benthem
Courses Plus Student 2,342 Pointsfloat 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
26,676 PointsHi 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
Courses Plus Student 2,342 PointsHello 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:)