Treehouse: Grow your CSS skills. Land your dream job.

How do I center these Nav buttons?

  • # January 23, 2011 at 4:18 am

    I’m trying to figure out the right CSS to center the text on the buttons.
    It’d be cool to center all of it in relation to the main container as well, but that’s secondary.

    Thanks much,

    # January 23, 2011 at 4:32 am


    text-align: center;
    # January 23, 2011 at 6:38 pm

    Basically what I’m trying to do is line up the text centered over the buttons like this:

    How would I go about that?

    # January 23, 2011 at 7:30 pm

    make your #main-nav width: 150px; then your text-align: center; will look correct.

    # January 23, 2011 at 7:56 pm

    dhechler, you rock. Thanks for your help as well Christopher.

    # January 24, 2011 at 12:52 am

    Okay you’re gonna love me guys, now I need help vertically centering this text within the button. My client wants this to mirror the template to a T.

    # January 24, 2011 at 1:44 am

    use padding. Also, your home link font visually looks smaller than the rest.

    # January 24, 2011 at 3:40 pm

    For vertical alignment, what you can do is take the height of the nav and apply that to the line-height as well.

    For example, if you nav button was 50px tall, you would apply line-height: 50px;

    # January 24, 2011 at 3:56 pm

    Ah yes, the classic line-height equal to button height. Works every time.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.