Navigation Bar into Center

Question

Hey guys this thing is driving me crazy, i can seem to get my navigation bar to float into the center. tried everything and cant seem to find a simple explanation. any help greatly 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;
}

`margin: 0 auto;`? You claim that you've "tried everything" yet the CSS you've provided has no alignment styling whatsoever... — James Donnelly, Mar 10 '14 at 14:22
`tried everything`... Yet the most basic and well known way to center an element solves your problem.. — Ruddy, Mar 10 '14 at 14:23
possible duplicate of [How I can center a menu bar with ul](http://stackoverflow.com/questions/22236080/how-i-can-center-a-menu-bar-with-ul) — Hashem Qolami, Mar 10 '14 at 14:35
`margin: 0 auto` won't work unless you have specified a width, and that is not always desirable. — Mathias, Mar 10 '14 at 14:46

score 2 · Accepted Answer · answered Mar 10 '14 at 14:24

See Fiddle

CSS

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

You need to tell the list (ul) how to align itself, this can be done by giving it a fixed with and a margin of 0 auto within a container of width 100% with centrally aligned text.

To get the li on the same line you need to make them display:inline-block

Thank you very much for your help, and such a useful tool JSFiddle is! — John Mack, Mar 11 '14 at 10:05

score 1 · Answer 2 · answered Mar 10 '14 at 14:44

If you don't want to add a fixed width to your menu you can use text-align: center on you <ul> and display: inline-block for the <li> elements.

jsFiddle

Full CSS

html, body{
    width:100%;
}
container{
    width:100%;
}
ul{
    padding: 0;
    display:block;
    text-align: center;
}
li{
    display:inline-block;
}

score 0 · Answer 3 · answered Mar 10 '14 at 14:25

0

try adding a width to the nav and margin: 0 auto

For more centering tips, read this:

http://www.tipue.com/blog/center-a-div/

If you want the nav to always be visible, you will need position: fixed as well.

answered Mar 10 '14 at 14:25

azurelogic

801
6
12

Navigation Bar into Center

3 Answers3

See Fiddle