Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

CSS → Центрирование Div по горизонтали и вертикали

Центрирование Div по горизонтали и вертикали


Демо: смотреть
Скачать: demo.zip [3,5 Kb] (cкачиваний: 111)


При создании макетов веб-страниц, вы, вероятно, сталкивались с ситуацией, когда вам нужно DIV выровнять по горизонтали и вертикали в центре с чистым CSS. Есть более чем несколько способов для достижения этой цели, и в этом мини уроке я собираюсь показать вам мой любимый с участием CSS и JQuery.

Но во-первых, основы:

Горизонтальное центрирование с CSS


Это очень просто:
.className{
    margin:0 auto;
    width:200px;
    height:200px;
}


Сдесь все просто чтобы выровнять по центру див, нужно просто задать margin auto. И нужно указать высоту и ширину нашего блока.

Горизонтальная и вертикальная центровка с CSS
Центр DIV по горизонтали и вертикали с CSS это немного сложнее. Вам необходимо знать размеры DIV заранее.

.className{
    width:300px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-100px 0 0 -150px;
}


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

Горизонтальная и вертикальная центровка с 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();


Преимущество использования этого метода является то, что вам не нужно знать, насколько большой является DIV. Основным недостатком является то, что она будет работать только с отключеным Java-Script. Хотя у нас уже сейчас некто их не отключает.
Опубликовал dimas_ua, 23-04-2011, 00:00 Комментариев: 1
 (голосов: 1)
Пишет LegGnom, 20 июля 2011 13:08
  • Сообщений: 0
  • Новостей: 0
Не понял эт что получается jquery будет работать только с отключенными скриптами???? поправь:

//Основным недостатком является то, что она будет работать только с //отключеным Java-Script. Хотя у нас уже сейчас некто их не отключает.