Просмотров: 15 938

Выравнивание блока 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 слева и справа).

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

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

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

Услуга верстки посадочных страниц.