css - How to center a navigation bar in Weebly site -


update 3/12/14: decided switch theme has centered nav bar , logo. transferred on other custom css elements old theme, such fonts, colors, , button style. here link site: http://www.ccard3.com/

i trying change site's layout left-logo , right-navigation layout logo on top , navigation below (both centered). have tried center logo , nav, , won't center of them. know how this? here css code header , navigation:

/* 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 {     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 {         -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 {      -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 {     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;      } 

have tried

margin-left: auto; margin-right: auto;  display: table; margin: 0 auto;  

it nice jsfiddle better diagnose issue. anyways try 3 options.


Comments

Popular posts from this blog

php - SPIP: From Tag directly to an article -

jquery - isAjaxRequest always return false -

ruby on rails - In a controller spec, how to find a specific tag in the generated view? -