• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Центрирование блоков DIV
Центрирование блоков DIV
workman
Вторник, 24 Октября 2017 | Сообщение 1
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Некоторые пользователи, задают мне в ВК вопрос - "Подскажи, как сделать центрирование блоков по экрану монитора"
Показываю))

Как сделать горизонтальное центрирование блока на 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 Октября 2017 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
А для чего нужен jQuery, что на CSS нельзя все сделать?

Это вопрос.
Страна: (RU)
workman
Среда, 25 Октября 2017 | Сообщение 3
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Цитата Kosten ()
А для чего нужен jQuery, что на CSS нельзя все сделать?

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