Рубрика CSS
Центрирование div по горизонтали и вертикали
При создании макетов веб-страниц, вы наверняка сталкивались с ситуацией, когда вам необходимо центрировать блоки Div по горизонтали и вертикали, обходясь только средствами CSS. Есть более, чем несколько путей для достижения этой цели, и в этом коротком уроке я покажу вам мою любимую тактику с использованием CSS и JQuery.
Но вначале, основы:
Горизонтальное центрирование с помощью CSS
Просто применяем отступы к блоку div:
.className {
margin:0 auto;
width:200px;
height:200px;
}Для центрирования блока div по горизонтали, Вы должны определить ширину, и установить значение auto для левых и правых краев (Вы наверное помните условное обозначение в CSS не так ли?). Этот метод применяется для блочных элементов (div, p, h1 и т.д). Чтобы применить его к инлайновым элементам (например, гиперссылкам или изображениям), необходимо применять одно дополнительное правило – display:block.
Горизонтальное и вертикальное центрирование с помощью CSS
Центрирование блока div по горизонтали и вертикали с помощью CSS реализуется сложнее. Для этого вам необходимо знать размеры d iv заранее.
.className{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
}Применяя к блоку div абсолютное позиционирование, мы можем «отделить» его от обычной среды и определить его положение относительно окна браузера. Указываем значение 50% для левой и верхней части окна и блок переместится точно в центр страницы. Единственное, что осталось сделать, это переместить блок div влево и к вершине на половину его ширины и высоты с отрицательным значением margin, чтобы центрировать его по центру.
Горизонтальное и вертикальное центрирование с помощью jQuery
Как уже упоминалось ранее – метод CSS работает только с блоками фиксированных размеров. В иных ситуациях будем использовать Jquery:
$(window).resize(function(){
$('.className').css({
position:'absolute',
left: ($(window).width() - $('.className').outerWidth())/2,
top: ($(window).height() - $('.className').outerHeight())/2
});
});
// To initially run the function:
$(window).resize();Вся функциональность заключена в функцию $(window).resize(), которая выполняется при каждом изменении окна браузера. Мы используем outerWidth() и outerHeight(), потому что в отличии от width() и height(), они берут во внимание ширину внутренних отступов и границ.
Преимуществом использования этого метода является то, что вам не нужно знать точные размеры блока div. Основным недостатком является то, что этот метод будет работать только при включенном JavaScript. Во всех других случаях применение данного метода является идеальным для богатых пользовательских интерфейсов (таких, как Facebook’s).
