Как сделать чтобы при уменьшении масштаба сайт оставался по центру
Перейти к содержимому

Как сделать чтобы при уменьшении масштаба сайт оставался по центру

  • автор:

HTML & CSS: как не надо

Не задавайте контейнерам ширину, равную брикпойнтам

Это решение подходит для мобильных устройств, где прокрутки нет, но не годится для десктопных браузеров, где она есть и занимает место на странице.

Как это увидеть? #

Допустим, есть макет для страницы шириной 600px, контент должен занимать всю ширину. Зададим соответствующий код:

Контейнер с фиксированной шириной на мобильных

Пример с фоном ширину страницы

Но если требуется, чтобы размеры картинки не менялись, а всё, что не поместилось по ширине, просто обрезалось, тогда картинке нужна обёртка:

 class="panorama">  class="panorama__img" src=". " alt=". "> 

Теперь центрируется обёртка, и она же отвечает за выравнивание картинки по центру:

.panorama  position: relative; /* растягиваем по ширине окна */ width: 100vw; /* скрываем всё, что не поместилось в экран */ overflow: hidden; /* центрируем обёртку */ left: 50%; transform: translate(-50%); /* центрируем картинки */ display: flex; justify-content: center; > .panorama__img  /* фиксируем ширину картинки */ width: 982px; /* отключаем max-width, если он было задано выше */ max-width: none; >

На мобильных всё будет работать как задумано, но если открыть на десктопе, обнаружится горизонтальная прокрутка:

Пример с картинкой на ширину страницы с горизонтальной прокруткой на десктопе

Потому что 100vw — это не ширина body , а вся ширина окна вместе с прокруткой, то есть элемент такой ширины на странице не поместится, что и вызовет появление горизонтальной прокрутки.

Чтобы решить эту проблему, ближайшему родителю широкой картинки, растянутому на всю ширину страницы, задайте overflow: hidden .

Пример с картинкой на ширину страницы без горизонтальной прокрутки

Горизонтальная прокрутка пропала, всё работает как надо.

Итого

Не задавайте контейнерам ширину, равную брикпойнтам, это может вызвать появление горизонтальной прокрутки в десктопных браузерах. Задавайте меньшую ширину или используйте паддинги/марджины для контейнеров с нефиксированной шириной.

Как выровнять слой по центру веб-страницы?

Выровнять блочный элемент заданной ширины по центру горизонтали веб-страницы.

Решение

По умолчанию ширина блочного элемента принимает значение auto , и он, как правило, занимает всю доступную ширину. Поэтому описанным методом по центру можно выровнять только такой элемент, у которого явно задана ширина в процентах или пикселах. После чего к стилю слоя следует добавить отступ слева (стилевое свойство margin-left ) и справа ( margin-right ) со значением auto . Впрочем, также можно воспользоваться универсальным свойством margin со значением auto (пример 1).

Пример 1. Выравнивание слоя по центру

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Выравнивание слоя по центру    

Результат примера показан на рис. 1.

Слой, выровненный по центру

Рис. 1. Слой, выровненный по центру

HTML по теме

CSS по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

  • Как добавить картинку на веб-страницу?
  • Как добавить иконку сайта в адресную строку браузера?
  • Как добавить фоновый рисунок на веб-страницу?
  • Как сделать обтекание картинки текстом?
  • Как растянуть фон на всю ширину окна?
  • Как выровнять фотографию по центру веб-страницы?
  • Как разместить элементы списка горизонтально?
  • Как убрать подчеркивание у ссылок?
  • Как убрать маркеры в маркированном списке?
  • Как изменить расстояние между строками текста?
  • Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
  • Как открыть ссылку в новом окне?

Уезжает верстка при изменении масштаба экрана, как исправить?

5f4a6f78458e4655109503.jpeg

Подскажите, пожалуйста, почему при изменении масштаба экрана часть верстки съезжает? А именно все то, что относится к div . Как должно быть:

5f4a6f9fd6185920063030.jpeg

Как получается при уменьшении масштаба:

Помещаю код всей секции:

Simple, safe & beautiful.
With HeyU, you'll get fast, simple, secure messaging!
iphone

CSS:
.header_main background: url(‘../img/header/bg.png’) center center/cover no-repeat;
height: 994px;
>

.container_logo display: block;
position: relative;
height: 45px;
>

.header_wrapper display: block;
height: 86px;
position: relative;
>

nav display: block;
position: absolute;
left: 1237px;
height: 86px;
margin: 53px 0 0 0;
>
.menu_logo display: block;
position: absolute;
margin: 41px 0 0 50px;
cursor: pointer;
>

.menu display: flex;
justify-content: space-between;
width: 413px;
list-style-type: none;

.menu .menu_link font-family: Lato;
font-size: 18px;
font-weight: 400;
color: #ffffff;
>

.simple margin-top: 201px;
min-height: 793px;
>

.simple .simple_text font-family: Lato;
font-size: 72px;
font-weight: 900;
letter-spacing: 0.04em;
color: #ffffff;
>

.simple .simple_descr width: 600px;
font-family: Lato;
font-size: 24px;
font-weight: 400;
color: #ffffff;
>

.simple .simple_descr span font-weight: 900;
margin-top: 43px;
>

.simple .simple_btn margin-top: 101px;
width: 224px;
height: 50px;
background-color: #ffffff;
box-shadow: 0px 10px 40px 0px rgba(53,53,53,0.15);
border-radius: 25px;
>

.simple .simple_btn p display: inline;
background: linear-gradient(0.0deg, #eb402c 0%, #d90647 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: Lato;
font-size: 18px;
font-weight: 700;
>

  • Вопрос задан более трёх лет назад
  • 948 просмотров

Центрирование всей страницы при масштабировании

Всем привет, недавно заметил, что при масштабировании страницы, весь документ остаётся слева, а вот например в вк всё остаётся посередине. Как можно это сделать?

Отслеживать
задан 27 апр 2019 в 16:23
Никита Краснобаев Никита Краснобаев
69 1 1 серебряный знак 6 6 бронзовых знаков
добавляйте ссылку или еще как-то надо продемонстрировать пробему
27 апр 2019 в 16:30

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Вариантов куча. Но один из лучших FLEX

html, body < width: 100vw; height: 100vh; >.parent < width: 100%; height: 100%; background: green; display: flex; justify-content: center; align-items: center; >.child

Отслеживать
ответ дан 27 апр 2019 в 16:52
14.5k 6 6 золотых знаков 33 33 серебряных знака 70 70 бронзовых знаков

Чтобы центрировать что-то, надо задать display: block; и margin: auto; . У элементов div и так по дефолту стоит block; поэтому остается ограничить ширину и дать авто-маргин (маргин задает свободное поле снаружи элемента). Дополнительное ограничение пикселями, чтобы у совсем широких экранов не получился километровый блок.

 .content 

ДЕМО (сдвигайте там рамку) [можно и минимальную ширину ограничить: min-width: 600px; ]

Точно также можно и картинки центрировать.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *