Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Need help centering my navigation!

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 11, 2013 at 6:14 am #42637
    Jochim
    Participant

    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 #124033
    SgtLegend
    Member

    See how the following goes for you.

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

    February 11, 2013 at 7:25 am #124038
    djenglander
    Member

    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 #124042
Paulie_D
Member

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 #124115
SgtLegend
Member

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 #124116
    wolfcry911
    Participant

    that’s true of justify, but not center

  • Author
    Posts
    • Viewing 6 posts - 1 through 6 (of 6 total)
    • The forum ‘CSS’ is closed to new topics and replies.