html - Navigation Bar into Center -


hey guys thing driving me crazy, can seem navigation bar float center. tried , cant seem find simple explanation. appreciated

html

<div class="container"> <div class="sixteen columns header"> <h1>learn guitar online</h1> <ul class="nav"> <li><a href="index.php">home</a></li> <li><a href="signup.php">sign up</a></li> <li><a href="forum.php">forum</a></li> <li><a href="video.php">video</a></li> <li><a href="other.php">other</a></li> </ul>    </div> 

more html...

css

.container .sixteen.columns.headerul.nav li {   } .container .sixteen.columns.header ul.nav li a{ text-decoration: none; } 

see fiddle

css

container{     text-align:center; /* center child content */     width:100%; /* max available (page) width */ } ul{     margin:0 auto; /* dont offset top/bottom of elemtent automatically calculate left/right  offset (margin) */     width:300px; /* set fixed width element has relative size align vs parent*/ } li{     display:inline-block; /* display list items on single line */ } 

you need tell list (ul) how align itself, can done giving fixed , margin of 0 auto within container of width 100% centrally aligned text.

to li on same line need make them display:inline-block


Comments

Popular posts from this blog

Android layout hidden on keyboard show -

google app engine - 403 Forbidden POST - Flask WTForms -

c - Why would PK11_GenerateRandom() return an error -8023? -