Каков правильный способ центрировать горизонтально внутри div?

Я относительно новичок в HTML/CSS, поэтому не стесняйтесь исправить любые другие ошибки, которые я (возможно) сделал. Вот мой HTML и CSS: http://jsfiddle.net/luxurymode/PrjJ3/3/Каков правильный способ центрировать горизонтально внутри div?

Все, что я хочу сделать, - это горизонтально сосредоточить UL внутри этого «навигатора». Каков правильный способ?

EDIT: Я случайно отправил неправильную скрипку. Теперь это правильно ...

источник

2012-02-27 LuxuryMode

Существует множество способов достижения эффекта. Что для вас означают «правильные» и «правильные»? –

лучший способ заставить ваши элементы li находиться в одной строке - это добавить их отображение: inline, remove float: left и remove display: block from links. – abresas

Спасибо @abresas! – LuxuryMode

Правильный путь

#topbar ul { 
    width: /* exact width of the ul */; 
    margin: 0 auto; 
}

DEMO

Другой способ

#topbar { 
    text-align: center; 
} 

#topbar ul { 
    display: inline-block;  
}

inline-block, но не 100% х-браузер доказательство.

DEMO

источник

2012-02-27 21:18:50 paislee

Что делать, если ширина ul может быть динамической? Я знаю много случаев, когда я не могу жестко кодировать ширину или меню вроде этого. –

Спасибо! А как насчет вертикали? Как только я добавил маржу 0 auto, вертикальное центрирование, похоже, исчезло. http://jsfiddle.net/luxurymode/PrjJ3/9/ – LuxuryMode

Неподвижно для обеспечения обоих путей Пейсли. –

Простой способ будет дать список ширину и установить маржу до 0 авто:

#topbar ul { 
    list-style-type: none; 
    margin:0 auto; 
    width:300px 
}

источник

2012-02-27 21:21:24 j08691

Если вы всегда будете знать стоимость вашего ул, затем используйте примеры из первых ответов пары. Если вы не знаете, какая ширина будет, вы должны использовать несколько иной метод. Измените свой float:left; на ваш ли на display:inline;, а затем добавьте text-align:center; в вашу гостиницу.

источник

2012-02-27 21:28:05

Первое: Для совместимости браузера (IE & FF) с инлайн-блока, используйте:

display:-moz-inline-stack; 
display:inline-block; 
zoom:1; 
*display:inline;

Так #nav ли, снять поплавок: левый и сделать это:

#nav li { 
    display:-moz-inline-stack; 
    display:inline-block; 
    zoom:1; 
    *display:inline; 
    border-right: 1px solid #fff; 
    box-shadow: 1px 0 0 rgba(255, 255,255, 0.1); 
}

Затем, чтобы центрировать вас Nav

#nav { 
    padding: .5em; 
    height: 55px; 
    width: 650px; 
    background-color: #325A8C; 
    text-align: center; 

}

источник

2012-02-27 21:39:12

Каков правильный способ центрировать горизонтально внутри div?

ответ

Смежные вопросы