Question

更新3/12/14：我最终决定切换到具有居中导航栏和徽标的主题。然后我转移了旧主题中的其他自定义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个选项。

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

1 个答案: