Страница 1 из 11
Форум » uCoz » Все о uCoz » ЦЕНТРИРОВАНИЕ БЛОКОВ DIV
ЦЕНТРИРОВАНИЕ БЛОКОВ DIV
milan_shubinДата: Среда, 25.10.2017, 15:31 | Сообщение # 1
Майор
Группа: Проверенный
Сообщений: 90
Награды: 2
Репутация: 16
Статус: Offline
На многих форумах в сайтах видел ответы пользователей "Подскажи, как сделать центрирование блоков по экрану монитора" и так сейчас мы раскажем вам как это сделать.

Как сделать горизонтальное центрирование блока на CSS:
Код
.myBlock{
margin:0 auto;
width:200px;
height:200px;
}

Горизонтальное и вертикальное центрирование блока на CSS:
Код
.myBlock{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
}


CSS метод центрирования блоков работает ТОЛЬКО с фиксированными размерами width:Хpx; height:Хpx;.
Если же размеры блока у вас не определены, на помощь придет jQuery:

Итак Господа к вашему вниманию, горизонтальное и вертикальное центрирование на jQuery:
Код
$(window).resize(function(){

                $('.myBlock').css({
                    position:'absolute',
                    left: ($(window).width() - $('.myBlock').outerWidth())/2,
                    top: ($(window).height() - $('.myBlock').outerHeight())/2
                });

});
// Для запуска функции при загрузке окна:
$(window).resize();

Вот и всё!
Данный материал был взять с сайта zornet.ru

Данный материал был предоставлен веб-мастером "workman"


Форум » uCoz » Все о uCoz » ЦЕНТРИРОВАНИЕ БЛОКОВ DIV
Страница 1 из 11
Поиск:

Старая форма входа