Editing Nav Menu - How Do I Wrap display:block, float:left to have a Centered Menu?

问题

Right, so, I've been self-editing a rather complicated site and have been stuck on this last part involving the menu. It has a float:left command (the navbar displays alined to the left of the screen) and I've been trying to get it to text-align:center (appear centered within the screen) with a wrapper but have been unsuccessful.

Below is the coding:

#nav a {
    display: block;
    padding: 5px;
    color: #aaa;
    text-decoration: none;
    outline: none;
    font-weight: normal;
    font-family: "Droid Serif", Georgia ,serif;
}
#nav > .current-menu-item > a,
#nav > li a:hover { color: #4C4C4C }
.plus { color: #aaa }
#nav ul {
    position: center;
    display: none;
}
#nav li {
    float: left;
    position: relative;
    list-style-type: none;
    padding-bottom: 5px;
}
#nav li a {
    letter-spacing: 3px;
    font-size: 14px;
    text-transform: uppercase;
    padding: 8px 15px;

I'm a programming noob and pretty much survive on combination of trial and error and the "inspect element" command in google chrome. Please be gentle and rather explanatory :)

cheers, Jess

回答1:

If you want to center the ul in the nav, just add width to ul and margin: 0 auto; If you do not want to add a width check out How do I center align horizontal <UL> menu?

回答2:

instead of float give display:inline-block to your LI . Write like this:

#nav li {
    display:inline-block;
    *display:inline;/* For IE*/
    *zoom:1;
    position: relative;
    list-style-type: none;
    padding-bottom: 5px;
}

来源：https://stackoverflow.com/questions/10280762/editing-nav-menu-how-do-i-wrap-displayblock-floatleft-to-have-a-centered-me

标签

css

wrapper

center

navbar