CODEWITHSUNDEEP
css
user2462794
user2462794

Reputation: 305

How to center navigation bar in UL?

Tried display: inline-block; text-align: center; and many things from the Internet, but nothing helped.

#nav{
    width: 100%;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none;
    background-color: #C9C9C9;
    border-bottom: 5px solid #ddd; 
    border-top: 1px solid #ccc; }
#nav li {
    list-style: none;
    float: left; }
#nav li a {
    display: block;
    padding: 5px 5px;
     font-size: 13px;
    text-decoration: none;
    color: #000;
    border-right: 1px solid #ccc; }
#nav li a:hover {
    color: #fff;
    background-color: #000; 
    -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; }

HTML:

    <ul  id="nav">
            <?php wp_nav_menu('menu=header_menu&container=false'); ?>
        <div class="clear"></div>
   </ul>

It looks like this:

... and I don't know how to center it.

Upvotes: 4

Views: 23070

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 105863

basic is : 

ul {
    margin:0;
    padding:0;
    list-style-type:none;
    text-align:center;
}
li {
    display:inline-block;
}

Note that if <li> floats, you lose :)

http://jsfiddle.net/KWG2j/

then , if you need to center ul with fluid width: go one step higher in html.
http://jsfiddle.net/KWG2j/1 

nav {
    text-align:center;
}
nav ul {
    margin: 0;
    padding: 0;
    display:inline-block;
    list-style: none;
    background-color: #C9C9C9;
    border-bottom: 5px solid #ddd;
    border-top: 1px solid #ccc;
}
nav li {
    display:inline-block;
}
nav li a {
    display: block;
    padding: 5px 5px;
    font-size: 13px;
    text-decoration: none;
    color: #000;
    border-right: 1px solid #ccc;
}
#nav li a:hover {
    color: #fff;
    background-color: #000;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
}

Upvotes: 5

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48600

http://jsfiddle.net/Be4Q2/

#nav {
    margin: 0;
    padding: 0;
    text-align:center;
    list-style: none;
    background-color: #C9C9C9;
    border-bottom: 5px solid #ddd;
    border-top: 1px solid #ccc;
}
#nav li {
    display:inline-block;
}
#nav li a {
    display: block;
    padding: 5px 5px;
    font-size: 13px;
    text-decoration: none;
    color: #000;
    border-right: 1px solid #ccc;
}
#nav li a:hover {
    color: #fff;
    background-color: #000;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
}

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
    <div class="clear"></div>
</ul>

Upvotes: 0

Umbrella
Umbrella

Reputation: 4788

Set a fixed width on your UL, then adjust it's margin as

margin: 0 auto;

This will apply equal margins to both the left and right of block elements that have a definite width.

Upvotes: 0

Related Questions