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
Post a Comment