Forums

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

Home Forums CSS How do I center my horizontal navigation bar?

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #45372
    dandelion
    Participant

    I’ve tried making this navigation bar both inline and by floating. Either way works fine, I think. (Is one way better?)

    But I am having trouble with centering. I want the background of the bar to go the full width of the page, even though all the content, including the navigation will be limited to 960 px. How do I get the top navigation bar, the actual set of choices, to center across the screen instead of sticking to the left?

    http://cdpn.io/grknG

    #137985
    Paulie_D
    Member
    #137986
    Senff
    Participant

    My general rule of thumb of centering list-items:

    UL should have text-align:center;
    LI, or anything it contains (including the links) can not be block-level

    Pretty much like this: http://codepen.io/senff/pen/LFiHp

    Then you’ll have to add some more styling to position them better of course — since the LI’s and A’s are not block-level anymore, padding works a little different.

    #137992
    dandelion
    Participant

    Thanks guys! I’ll switch over to an inline version and give these a try.

    #137994
    dandelion
    Participant

    So I adjusted my code (thanks for all the examples!) and it worked for centering the bar horizontally. But now I’m back to boxes that aren’t centered vertically. (The problem Paulie helped me with yesterday). I still have the height set on that

  • so I’m not sure what’s up. Do I have to choose? Use floats if I want vertical centering and inline if I want horizontal?

    I edited an re-saved my codepen to show you. http://cdpn.io/grknG

#137996
Paulie_D
Member

If you set inline-block on the `li`s it seems to fix it but I’m not sure if that will have knock on effects elsewhere.

#137999
dandelion
Participant

I see what you mean, I made the change. But what do you mean by “knock on effects?”

#138001
Paulie_D
Member

@Senff mentioned changing the position so you’d have test to make sure the spacing etc. is still how you wanted it.

#138003
dandelion
Participant

Ah right. Yes, I’ll play with the padding for each LI.

Thanks! I’m learning a lot this week!

#138006
PicnicTutorials
Participant

Here this shows all 6 ways to center your nav http://www.websitecodetutorials.com/code/css/css-center-nav.php

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