Grow your CSS skills. Land your dream job.

Need help centering my navigation!

  • # February 11, 2013 at 6:14 am

    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

    # February 11, 2013 at 6:45 am

    See how the following goes for you.

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

    # February 11, 2013 at 7:25 am

    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;}

# February 11, 2013 at 7:37 am

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

# February 11, 2013 at 5:38 pm

The reason I used floats is because it allows for dynamic `

  • ` 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.
  • # February 11, 2013 at 5:39 pm

    that’s true of justify, but not center

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

    You must be logged in to reply to this topic.

    *May or may not contain any actual "CSS" or "Tricks".