Просмотров: 9 855

Выравнивание блока div по центру (по горизонтали). margin:auto.

Выравнивание блока div по центру 1

Пожалуй, самым простым и легким способом выровнять блок div по центру является использование свойства margin со значением margin-left:auto и margin-right:auto.

Самое важно условие, чтобы это начало работать, у блока div должна быть задана определенная ширина (в пикселях или процентах).

Посмотрите, как это может выглядеть:

<div style="background:#ccc; width:300px; height:300px; margin:auto;">Содержимое блока</div>

Как вы понимаете, условие  margin-left:auto и margin-right:auto можно записать сокращенно:

margin:auto;

или

 margin:10px auto;

(получаем отсуп в 10 пикселей сверху и снизу и auto слева и справа).

Все это работает до тех пор, пока у блока задана ширина, если вы ее уберете, выравнивание сразу пропадет.

Таким образом, браузер, зная исходную ширину блока, может автоматически рассчитать такую величину отступов, чтобы блок встал ровно по центру.

Этот материал входит в соостав курса «Базовые приемы верстки веб-страниц»

К списку всех материалов курса. Доступ можно получить в группе вконтакте, в разделе «Ссылки».