如何使水平导航菜单中心对齐

Question

I am creating a Wordpress theme based on the Twenty Eleven theme and can't figure out how to have the navigation bar center automatically so I won't have to constantly update it.

Here is my CSS: http://pastebin.com/SGvKmXEb

Here is the PHP/HTML: http://pastebin.com/TBL1nzjV

There may be duplicate properties in the CSS, but only because I am still experimenting with this and testing multiple things...

Thanks in advance for the help!

Answer 1

I'd choose an inline-block approach.

.containerElement {
    width: 100%;
    text-align: center;
}

.childElements {
    display: inline-block;
}

In order to make it work in your code, you need to remove .containerElement (#access ul) fixed height, and .childElements (#access li) floating property.

Answer 2

This Worked for me on the test site you provided

#access li {

float: left; /*delete*/
display:block; /*delete*/

display:inline-block; /*add*/

}

#access ul {

margin-left: 25%; /*delete*/
margin-right: 25%; /*delete*/
width: 1000px; /*delete*/
height: 10px; /*delete*/

margin-bottom: 0px; /*add*/
margin-left: 0px; /*add*/
padding: 0px; /*add*/

}