• Страница 1 из 1
  • 1
Форум про uCoz » uCoz » Все о uCoz » ЦЕНТРИРОВАНИЕ БЛОКОВ DIV
ЦЕНТРИРОВАНИЕ БЛОКОВ DIV
milan_shubin OfflineДата: Среда, 25.10.2017, 15:31 | Сообщение # 1
Проверенный
Сообщений: 94
16


На многих форумах в сайтах видел ответы пользователей "Подскажи, как сделать центрирование блоков по экрану монитора" и так сейчас мы раскажем вам как это сделать.

Как сделать горизонтальное центрирование блока на 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 » Все о uCoz » ЦЕНТРИРОВАНИЕ БЛОКОВ DIV
  • Страница 1 из 1
  • 1
Поиск: