如何在 Weebly 网站中居中导航栏

Question

2014 年 3 月 12 日更新：我最终决定切换到具有居中导航栏和徽标的主题。然后，我从旧主题中转移了其他自定义 CSS 元素，例如字体、颜色和按钮样式。这是我网站的链接：http://www.ccard3.com/

我正在尝试将我的网站布局从左徽标和右导航更改为徽标在顶部和导航在其下方（均居中）的布局。我已经尽我所能将徽标和导航居中，但它不会将它们中的任何一个居中。有人知道怎么做吗？ 这是我的标题和导航的 CSS 代码：

/* Header
--------------------------------------------------------------------------------*/

#nav-wrap .container,
#nav-wrap .container table {
border-collapse: collapse;
border-spacing: 0;
width:960px;
}

#wsite-title {
font-family: 'HelveticaNeue-Thin',Helvetica-light,arial,sans-serif;
font-weight:300;
font-size:16px;
color:#333;
line-height:28px;
float:left;
transition: color 1s;
-moz-transition: color 1s; 
-webkit-transition: color 1s; 
-o-transition: color 1s; }

#wsite-title:hover {
color:#333;
}

#header {
border-collapse: collapse;
border-spacing: 0;
text-align:right;
height:20px;
width:100%;
}

#header,
#header table {
border-collapse: collapse;
border-spacing: 0;
}

#header td {
vertical-align: middle;
text-align: left;
}

#header-right {
border-spacing:0;
padding:0;
padding-top:20px;
}

#header-right table {
float:right;
width:1px;
}

#header-right td {
padding: 0 0 0 0;
}



/* Navigation
--------------------------------------------------------------------------------*/


#nav-wrap .container {
    clear: both;
    overflow: hidden;
    position: relative;
    margin-bottom:20px;
}

#nav-wrap .container table, #nav-wrap .container table tr, #nav-wrap .container table tr td, #nav-wrap .container table tbody {
    vertical-align:bottom;
}

td#nav {
    float:right;
}
#navigation {
    line-height: 1;
    float: right;
}

#navigation ul {
    display: inline;
    list-style: none;
    float: right;
    max-width:700px;
    height:44px;
    overflow:hidden;
    margin-bottom:-1px;
}

#navigation li {
    display: inline-block;
    position: relative;
    list-style: none;
    margin-left:6px;
}

#navigation ul li a {
    display: block;
    color: #777;
    text-decoration: none;
    padding: 18px 0px 8px;
    margin:0 0 0 7px;
    border: 0;
    outline: 0;
    list-style-type: none;
    float: left;
    font:16px 'HelveticaNeue-Light',Helvetica-light,arial,sans-serif;
    text-transform:none;
    font-weight:300;
    text-align:center;
}

#navigation ul li#active a{
    color:#000;
}

#navigation ul li a:hover {
    color: #333;
}

/* Navigation Submenu's
--------------------------------------------------------------------------------*/
#wsite-menus .wsite-menu {
    position:relative;
    margin-top:11px;
}

#wsite-menus .wsite-menu li ul:after {
    content: "";
    width: 0px;
    height: 0px;
    border-style: none;
    border-width: 0 0px 0px 0px;
    border-color: transparent transparent transparent transparent;
    position:absolute;
    top:-6px;
    left:16px;
}

#wsite-menus .wsite-menu:after {
    content: "";
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 0px 0px 0px;
    border-color: transparent transparent #000 transparent;
    position:absolute;
    top:-6px;
    left:16px;
}

#wsite-menus .wsite-menu li:first-child a {    
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 0px;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}

#wsite-menus .wsite-menu li:last-child a { 
    -moz-border-radius-bottomleft: 0px;
    -moz-border-radius-bottomright: 0px;
    -webkit-border-bottom-left-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

#wsite-menus .wsite-menu li a {
    background:rgba(360,360,360,0.8);
    font-family: 'HelveticaNeue-Light',Helvetica-light,arial,sans-serif;
    font-size:14px;
    color:#777;
    border:0;
    border-bottom:none;
}

#wsite-menus .wsite-menu li a:hover {
    color:#333;
    background-color:rgba(360,360,360,0.8);
    border:0px solid #078ef0;
    border-radius:0px;
    padding:5px 5px;

    }

Answer 1

你试过了吗

margin-left: auto;
margin-right: auto;

display: table;
margin: 0 auto; 

如果 jsfiddle 能更好地诊断问题，那就太好了。 无论如何尝试这 3 个选项。