css - 在导航栏中居中对齐菜单

Question

我试图将菜单对齐到导航栏的中心，但它是左对齐的。

下面是我的CSS。我已经尝试了所有我能想到的...但我想这是我错过的一件小事。

如何让它居中？

我的CSS:

.page-wrap {
    width: 100%;
    height: 100%;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}
.header {
    background-color: #00FF00;
    width: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}
body{ -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }

#toggle, .toggle { display: none; }


/* micro clearfix */
.clearfix:before, .clearfix:after { display: table; content: ""; }
.clearfix:after { clear: both; }
.toggle{ 
    z-index: 2; 
}


/* reset padding and margin where necessary etc. */
ul {
    list-style-type: none;
    margin: 0;
    padding: 0px;
    z-index: 2; 
}

a {
    text-decoration: none;
    font-size:x-larger;

}

/* just some quick demo styles for color whatnot */
nav {
    background: #efefef;
    color: white;
    z-index: 2;
}

nav ul ul {
    background: #efefef;
    z-index: 2; 
    width:150px;
}

nav ul ul ul {
    background: #efefef;
    z-index: 2; 
}

nav a  {
    color: white;
    white-space:nowrap;

}

nav a:hover  {
    background: ##bbeecc;

}

/* important functional styles */
nav > ul:after {
    /* clear the float */
    content:'';
    clear:both;
    display: block;
}

nav li  {
    /* for the topmost level we want them to float.  will be overridden */
    float:left;
    font-size: large;

}

nav li a {
    /* always apply padding and display block to the a.  better user experience. */
    display:block;
    padding: 10px;
    font-size: large;

}

nav li ul li {
    /* overridden floating here */
    float: none;
    font-size: large;

}

/* here is where all the positioning takes place */
nav li {
    position:relative;
}

nav li ul {
    position:absolute;
    left: 0; /* for top most level lets align to the left */
    top: 100%; /* and have it at the bottom of the parent */
    display:none; /* hide initialy */
}

nav li ul li ul {
    left: 100%; /* for grandchild level lets align to the right of the list item */
    top: 0; /* and have it at the top of the parent li */
}

nav ul li a:hover + ul,
nav ul li a + ul:hover {
    /* show only if the element or the immediately preceding anchor is hovered*/
    display:block;
}

@media only screen and (max-width: 768px){


    ul{
    display: none;
    opacity: 0;
    width: auto;
    height: auto;
    background: #efefef;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    z-index: 3; 
    }

    nav {
    height:40px;
    z-index: 3; 
    }

    nav ul ul {
    background: #efefef;
    z-index: 3; 
}

nav ul ul ul {
    background: #efefef;
    z-index: 3; 
}
    nav a  {
    color: white;

}
    nav ul{
    position: relative;
    width:200px;
    z-index: 3; 
    }   

    ul li { 
    float:none;
    display: block; 
    width: auto; 
    margin: 0 0 0 0px;
    height: auto; 
    font-size:12px;

    }

    ul li a { 
    float:none;
    display: block; 
    width: auto; 
    text-decoration: none;
    margin: 0 0 0 0;    
    color:#fff; 
    height: auto;  
    }   

/* here is where all the positioning takes place */
    nav li {
        position:relative;
        }

    nav li ul {
        position:absolute;
        left: 100%; /* for top most level lets align to the left */
        top: 0%; /* and have it at the bottom of the parent */
        display:block; /* hide initialy */
    }

    nav li ul li {
    position:relative;
    }

    nav li ul li ul {
        left: 100%; /* for grandchild level lets align to the right of the list item */
        top: -25%; /* and have it at the top of the parent li */
    }

    .toggle { display: block; position: relative; user-select: none;z-index: 3;  }

    #toggle:checked ~ ul { display: block; opacity: 1;z-index: 3; }

    ul li a:hover, ul li a:focus{
    background: ##bbeecc;
    }
    nav ul li a:hover + ul,
    nav ul li a + ul:hover {
        /* show only if the element or the immediately preceding anchor is hovered*/
        display:block;  
        opacity:1; 
        z-index: 3;     
    }
    .toggle:after {
    content: 'MENU';
    display: block;
    width: auto;
    margin: 0px;
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    font-size: x-large;

    color: #FFFFFF;
    background: #efefef;
    z-index: 3; 
    }

    .toggle:hover:after{
    background: #efefef;
    }

    #toggle:checked + .toggle:after{
        content: 'CLOSE MENU';
        z-index: 3; 

    }

}

这是 http://jsfiddle.net/uL9B8/

Answer 1

使用此 css

定义你的 nav text-align: center; 和 .menu 定义 display: inline-block;

像这样

nav{
    text-align: center;  
} 
ul.menu {
display: inline-block;
vertical-align: top;
}

Demo