Центрирование блока

Для центрирования блока по горизонтали во многих источниках рекомендуется использовать такую конструкцию

Selec All Code:
<div id="outbox">
<div id="inbox">test text</div>
</div>

При этом для внутреннего блока inbox предлагается использовать стиль

Selec All Code:
#inbox{
margin:0 auto;
}

К сожалению, при использовании этой конструкции «как есть», она не работает. Текст центрируется только при задании ширины внутреннего блока, то есть

Selec All Code:
#inbox{
width:200px;
margin:0 auto;
}

И вот результат:

test text

UPD: Но и  этот метод не работает, когда приходится центрировать блок, ширину которого невозможно задать. Например, сегодня я столкнулся с такой проблемой: блок горизонтального выпадающего меню, который требовалось разместить посередине страницы, никак не хотел слушаться волшебного заклинания margin:0 auto; — из-за своей переменной ширины. Блок расползался на всю оставшуюся ширину страницы, обнуляя боковые поля. Тут мне помог другой рецепт.

Стоило только заменить тэги блока на тэги таблицы, при сохранении стилей — меню обжалось по ширине и прекрасно отцентровалось.

test text

 

***

Хотите обсудить? Оставьте комментарий