CODEWITHSUNDEEP
cssmenualignment
Jess McKenzie
Jess McKenzie

Reputation: 8385

CSS: Center Align

I have the following CSS Menu with float:left; how could I make this center. Where do I add margin:0 auto?

CSS:

/* === 7. Navigation === */

#nav{
    width:100%;
    margin:30px auto;
}

.ie7 #nav{
    padding:10px 0 0 30px;
}

#nav ul li{
    margin:0 auto;
}

#nav li{
    float:left;
    text-align:center;
    list-style:none;
    font-weight:bold;
}
#nav li a{
    margin-right:30px;
    text-decoration:none;
    color:#5d5e5d;
}

#nav li a:hover{
    text-decoration:underline;

}

#nav li a:active{
    font-family:inherit;
    font-size:inherit;
    color:#fff;
}

HTML:

  <ul id="nav"><!--Navigation-->
                    <li id="homenav"><a href="#home">Home</a></li>
                    <li id="portfolionav"><a href="#portfolio">Portfolio</a></li>
                    <li id="contactnav"><a href="#contact">Contact</a></li>
   </ul>

Upvotes: 1

Views: 12461

Answers (4)

Andres I Perez
Andres I Perez

Reputation: 75379

If you don't have an specified width to center your menu you can just declare your list items as display:inline-block instead of float:left and jut set the text-align property to center, like so:

CSS

#nav > li {
    display:inline-block;
    *display:inline; /* ie7 fix */
    zoom:1; /* hasLayout ie7 trigger */
    list-style:none;
    font-weight:bold;
}

#nav {
    text-align:center;
}

This way your menu will center regardless of a width.

Upvotes: 8

Kishore Kumar
Kishore Kumar

Reputation: 12864

Add display property of your #nav as table and margin for both left and right auto.

#nav{
    display:table;
    margin-left:auto;
    margin-right:auto;
 }

Upvotes: 3

Elliot Bonneville
Elliot Bonneville

Reputation: 53291

Inside #nav {...};. Be aware that your nav needs a fixed-width in order for this to work.

Upvotes: 0

Jordan Speizer
Jordan Speizer

Reputation: 573

First your #nav element needs to have a width less than 100%. Then add "margin:0 auto" and it should center.

Upvotes: 1

Related Questions