Страница 1 из 11
Форум про uCoz » Все для вебмастера » Начинающий Вебмастер » Центрирование блоков DIV
Центрирование блоков DIV
workman
Дата: Вторник, 24.10.2017, 12:02 | Сообщение # 1
Гл. Модератор
Сообщений:1696
Награды: 8


Некоторые пользователи, задают мне в ВК вопрос - "Подскажи, как сделать центрирование блоков по экрану монитора"
Показываю))

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

Ну вот такими простыми методами мы с вами научились центрировать блоки DIV на своем сайте 04b
Страна: (RU)
Kosten
Дата: Среда, 25.10.2017, 04:02 | Сообщение # 2
Администраторы
Сообщений:15806
Награды: 51


А для чего нужен jQuery, что на CSS нельзя все сделать?

Это вопрос.
Страна: (RU)
workman
Дата: Среда, 25.10.2017, 07:05 | Сообщение # 3
Гл. Модератор
Сообщений:1696
Награды: 8


Цитата Kosten ()
А для чего нужен jQuery, что на CSS нельзя все сделать?

Можно и на стилях конечно вытягивать. Но для Лейдилингов больше всего подходит если один раз установить скрипт
Страна: (RU)
Форум про uCoz » Все для вебмастера » Начинающий Вебмастер » Центрирование блоков DIV
Страница 1 из 11
Поиск: