Проблема центрирования CSS для меню навигации - PullRequest
Новая
       25

Проблема центрирования CSS для меню навигации

0 голосов
/ 12 августа 2011

Мне нужна помощь с CSS-кодированием.Я пытался расположить это навигационное меню по центру страницы, и независимо от того, что я делаю, я не могу заставить его работать.Я пробовал padding-left, margin-left, text-align: center, и ничего не работает.Меню продолжает оставаться больше слева, чем справа.

Вот скриншот проблемы: http://i132.photobucket.com/albums/q38/blacktiphunter/center.jpg

Я уверен, что это что-то очень простое, но я просто могуКажется, я не понял, что я делаю неправильно?

Вот прямая ссылка на страницу: http://blacktiphfishing.org/test.html

Любая помощь очень ценится!

Ответы [ 4 ]

2 голосов
/ 12 августа 2011

Если вы удалите

margin:0; от #nav

выглядит по центру.

Проверено в Chrome

1 голос
/ 12 августа 2011

сначала добавьте overflow:hidden для #nav, #nav ul, чтобы очистить поплавки.Затем добавьте margin:0 auto. Но это всегда требует фиксированной ширины, поэтому установите ее, например: width:760px Итак, новый css: 

#nav, #nav ul {
    list-style: none outside none;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 760px;
    z-index: 30;
}
0 голосов
/ 12 августа 2011

CSS-макеты иногда могут быть немного головной болью. Попробуйте использовать 'inspect element' в chrome или firebug в firefox, чтобы включить / отключить и изменить стили, чтобы получить точные настройки

0 голосов
/ 12 августа 2011

Вам нужно указать точную ширину MainMenu div и установить его левое-правое поле на auto, если вы хотите достичь правильного центрированного макета.

Точная ширина будет 780px ( 150px * 5 (5 ссылок в каждой строке) + 10px * 2 (10 пикселей слева + 10 пикселей правой границы) + 2px * 5 (правое полекаждого li))

Используйте эту CSS: 

#mainMenu {
    background: none repeat scroll 0 0 #000000;
    border: 10px solid #000000;
    color: #FFFFFF;
    display: block;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    width: 780px;
}

Чтобы центрировать раздел навигации

...