Просмотров: 13 098

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

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

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

Кстати, если вам будет интересно, я занимаюсь веб-аналитикой сайтов. Если вы хотели бы сделать ваш сайт более эффективным и, чтобы он приносил больше денег, веб-аналитика может в этом помочь.

Обучающий курс для начинающих по основам работы с веб-аналитикой сайтов на системе Яндекс Метрика здесь.

Страница с описанием моих услуг по веб-аналитике: здесь.