HTML + CSS CSS выпадающего центра

Question

У меня есть это меню:

#navbar {
    text-align: center;
    margin: auto;
    padding: 0;
    height: 1em; 
    }
#navbar li {

    list-style: none;
    float:left; }
#navbar li a:hover{
background-color: #CCC;
}
#navbar li a {
border: 1px solid #000;
    display: block;
    margin-right: 18px;
    margin-left: 18px;
    padding: 3px 8px;
    background-color: #FFF;
    color: #000;
    text-decoration: none; }
    #navbar li ul {
    display: none;
    width: 10em; /* Width to help Opera out */
}
    #navbar li:hover ul {
    display: block;
    position: absolute;
    margin: 0;
    padding: 0; }
#navbar li:hover li {
    float: none; }
#navbar li:hover li a {
    background-color: #FFF;
    border-bottom: 1px solid #000;
    color: #000; }
#navbar li li a:hover {
    background-color: #CCC; }


<ul id="navbar">
<li><a href="index.php">Start</a></li>
<li><a href="index.php">Vad?</a></li>
<li><a href="index.php">Kom igång!</a></li>
    <li><a href="#">Läringsartikler</a><ul>
        <li><a href="#">Subitem One</a></li>
        <li><a href="#">Second Subitem</a></li>
        <li><a href="#">Numero Tres</a></li></ul>
    </li>
    <li><a href="#">Läringsfilmer</a><ul>
        <li><a href="#">Subitem One</a></li>
        <li><a href="#">Second Subitem</a></li>
        <li><a href="#">Numero Tres</a></li></ul>
    </li>
</ul>

как вы можете видеть на панели навигации {я пытался использовать text-align: center или margin: auto, но он по-прежнему не центрировал все меню .. Зачем? когда я изменяю навигационную панель li на плавающий центр вместо плавающего влево, это делает все меню глупым большим

Answer 1

Существует NO центральное значение для атрибута стиля 'float'

- К сожалению, не вижу этот комментарий

Answer 2

Как уже упоминалось, нет Float: центр. Для центрирования с помощью полей margin-left и margin-right вам нужно либо установить ширину (как упомянуто выше), либо изменить ее на display: block.

Если вы не хотите устанавливать ширину или не можете, есть CSS-хак под названием Shrink Wrapping, который легко настроить.

Answer 3

Вам необходимо указать ширину на панели навигации ul.

#navbar {
    text-align: center;
    margin: auto;
    padding: 0;
    height: 1em; 
    width: 400px;
}