html - Centering My Nav -
i need center nav in website ( http://beautra.weebly.com/ ), ideas? here's code, tried playing inspect element tool couldn't work out. code seems simple enough work out don't know how work jsfiddle. appreciated. thanks,
/* navigation --------------------------------------------------------------------------------*/ #topnav { clear: both; text-align:center; background: url(nav-left.png) no-repeat; padding-left: 8px; width: 971px; } #nav-right { background: url(nav-right.png) right top no-repeat; padding-right: 10px; } #nav-inner { background: url(nav-inner.png) repeat-x; padding: 2px 5px 3px; } #topnav ul { list-style: none; float: none; background: url(nav-sep.jpg) no-repeat left center; } #topnav ul li { list-style: none; float: left; background: url(nav-sep.jpg) no-repeat right center; padding-right: 2px; } #topnav { float: left; text-align:center; display: block; color: #989899; text-decoration: none; padding: 19px 38px; border: 0; outline: 0; list-style-type: none; font-size: .9em; } #topnav li#active a, #topnav a:hover { transition: 0.5s; -moz-transition: 0.5s; -webkit-transition: 0.5s; -o-transition: 0.5s; color: #ed53ae; background: #090909 url(nav-active.png); border: 0; }
i'd suggest making child ul
element inline-block
.
#nav-inner > ul { display: inline-block; }
and adding text-align:center
parent element, #nav-inner
.
#nav-inner { text-align: center; background: url(theme/nav-inner.png?486154) repeat-x; padding: 2px 5px 3px; }
this ensure menu centered regardless of dimensions - dynamic content (i.e., don't have set fixed width , use margin:0 auto
..).
Comments
Post a Comment