CSS: Center Align

Question

У меня есть следующее меню CSS с float:left;, как я могу сделать этот центр.Куда мне добавить 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>

Answer 1

Если у вас нет указанной ширины для центрирования вашего меню, вы можете просто объявить элементы списка как display:inline-block вместо float:left и просто установить свойство text-align в центр, например:

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;
}

Таким образом, ваше меню будет центрироваться независимо от ширины.

Answer 2

Добавление свойства отображения вашего #nav в виде таблицы и поля для левого и правого автоматического режима.

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

Answer 3

Взгляните на эту статью. Это работает для меня, когда у меня возникают проблемы с центрированием. Он также совместим с различными браузерами.

Answer 4

Сначала ваш элемент #nav должен иметь ширину менее 100%.Затем добавьте «margin: 0 auto», и оно должно центрироваться.

Answer 5

Внутри #nav {...};. Имейте в виду, что вашей навигации нужна фиксированная ширина, чтобы это работало.