Центрирование списка навигации на странице

Question

Я пробовал все, но это не центрирует список на странице. Вот CSS:

#lowermenu2 { 
    width: 100%; 
} 

#lowermenu2 ul { 
    list-style-type: none; 
    display: block; 
    margin-right: auto; 
    margin-left: auto; 
    margin-top: 0px; 
    margin-bottom: 0px; 
    width: 100%; 
} 

#lowermenu2 a { 
    width: 100%; 
    text-align: center; 
    display: block; 
    text-decoration: none; 
    color: #003E79; 
    font-family: "Adobe Garamond Pro"; 
    font-weight: bolder; 
    font-size: 1.3em; 
    height: 44px; 
    margin-top: 0px; 
    margin-right: auto; 
    margin-left: auto; 
    padding-top: 7px; 
    font-style: italic; 
    line-height: 90%; 
} 

#lowermenu2 li { 
    float: left; 
    width: 30%; 
    max-width: 230px; 
    margin-right: auto; 
    margin-left: auto; 
    padding-left: 10px; 
} 

Вы можете увидеть страницу в http://granthoneymoon.com/temp2.html (это нижнее меню прямо под пустым объявлением, не в верхнем меню навигации)

UPDATE: Я избавилась от поплавка: левые и изменен блок на встроенный: блок. Я также изменил lowermenu2 на позицию: относительный и сделал левый и правый поля «авто», и он по-прежнему не центрирован. (это меню LOWER, о котором я говорю не о mainnav)

Answer 1

Причина в том, что «float: left;» на лиге. Float обычно используется для размещения содержимого слева или справа. Следовательно, вы не сможете его центрировать. Таким образом, свойство, которое вы ищете, это «display: inline-block»;

#lowermenu2 ul { 
    list-style-type: none; 
    display: block; 
    margin-right: auto; 
    margin-left: auto; 
    margin-top: 0px; 
    margin-bottom: 0px; 
    width: 100%; 
    text-align: center; 
} 
#lowermenu2 li { 
    display: inline-block; 
    padding-left: 10px; 
    width: 25%; 
} 

Answer 2

Добавить text-align: center к вашему элементу UL и удалить float:left из списка ваших элементов и установить их в display: inline-block.

#lowermenu2 ul { 
    /*your existing styles*/ 
    text-align:center; 
} 
#lowermenu2 ul li{ 
    /*your existing styles minus float left*/ 
    display:inline-block; 
} 

Вот результат:

Answer 3

Если вы пытаетесь центрировать реальную «навигационную панель», а не только нав «ссылки»

то вам нужно изменить 2 вещи:

ТЕЛА

body { 
position:relative; 
margin:0 auto; 
width:1000px; <!-- Or Whatever you want it be --> 
} 

В настоящее время ваш body установлен на 100%, это нормально, теперь просто добавляйте атрибуты позиции и поля, как у меня выше ... это центрирует вашу страницу.

Nav Bar

Теперь для Nav Bar

#mainnav{ 
position:relative; 
margin:0 auto; 
width: 100%; 
} 

Это заставит ваш навигационный бар, чтобы центрироваться в середине страницы