css - 如何在 Weebly 网站中将导航栏居中

Question

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

我正在尝试将我网站的布局从左侧 Logo 和右侧导航更改为 Logo 在顶部和导航在其下方(均居中)的布局。我已尽我所能使 Logo 和导航居中，但它不会居中任何一个。有人知道怎么做吗？这是标题和导航的 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 个选项。