Использование средств CSS и jQuery для центрирования блока

Использование средств CSS и jQuery для центрирования блока

Ровный центр

Здравствуйте, уважаемые читатели!

Если вы уже занимались версткой веб-страниц, то вам, вероятнее всего, приходилось сталкиваться с проблемой центрирования блоков (div) по горизонтали и вертикали. Самый применяемый метод центрирования – это, несомненно, стили CSS.

Для начала вы должны определиться с шириной и высотой используемого блока. При горизонтальном центрировании с помощью CSS необходимо поставить для левой и правой границы значение auto (как показано на рисунке).

Стили

Данный способ используется для блочных элементов, таких как div, p, h1 и др. Для применения метода к гиперссылкам или изображениям, требуется использовать дополнительное правило – display:block.

Немного замысловатей будет выглядеть реализация одновременно горизонтального и вертикального центрирования.

Одновременное центрирование

Абсолютное позиционирование, указанное на рисунке, отделяет блок от среды, устанавливая его расположение по отношению к окну браузера. Слева и сверху устанавливается значение 50%, в результате чего блок разместится в центре окна. Последняя строчка кода в примере смещает блок влево и вверх, ввиду отрицательных значений, для наилучшего расположения.

Как вы видите, все легко и просто. Но лишь до тех пор, пока блок имеет фиксированный размер. При других раскладах не обойтись без центрирования с помощью jQuery.

Центрирование JQuery

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

Дискуссия по теме