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 Alex Weinberg
Alex Weinberg
2,726 Points

how can I align the text in drop down nav to center?

So everything is lining up nice for my nav, but for some reason I can't seem to get the text in the drop down li items to align center. Any ideas?

<nav> <ul id="main-nav"> <li>Home</li> <li>Media <ul id="sub-nav"> <li>Videos</li> <li>Photos</li> </ul> </li> <li>About <ul id="sub-nav"> <li>Poop</li> <li>Pee</li> </ul> </li> <li>Contact</li> </ul> </nav>

  • { box-sizing: border-box; }

ul { padding: 0; width: 80%; }

li { width: 20%; list-style: none; padding: 5px 0; float: left; background-color: grey; text-align: center; font-size: 1.3rem }

main-nav {

margin: 0 auto }

main-nav li {

margin-right: .5% }

sub-nav {

display: none; padding-top: 6px; text-align: center; }

sub-nav li {

clear: left; text-align: center; }

main-nav li:hover #sub-nav {

display: block; }

3 Answers

Alex Weinberg
Alex Weinberg
2,726 Points

Nevermind, I figured it out. The drop down ul and li were not at full width so the text was overflowing out of the element. Thanks for looking!

jsdevtom
jsdevtom
16,963 Points
jsdevtom
jsdevtom
16,963 Points

The text should be aligned. See here: http://codepen.io/1db8k/pen/ONjGeX

There is probably another part of code that you're not showing that is preventing the text being centered.

If you post the whole code, I can help :-)

Alex Weinberg
Alex Weinberg
2,726 Points
Alex Weinberg
Alex Weinberg
2,726 Points

Huh, don't think that's what I'm going for. The code you just sent me is laid out differently and doesn't look like what I wanted. The weird thing is, I made that nav on codepen and copied and pasted it onto here. That was all of the code that was involved. I should have just included a link to the codepen to show you what I mean. Here it is...

http://codepen.io/alexwnbrg/pen/PNKVZb

Just want the text aligned in the #sub-nav like it is in the #main-nav.