При уменьшении экрана браузера блок уходит за левый край экрана

@Atarion · Регистрация: 01.04.2016

Студворк — интернет-сервис помощи студентам

left 50% и margin-left:-width/2

при уменьшении экрана браузера уходит за левый край экрана. как этого избежать?

@AlexZaw · 05.07.2017, 17:32

Убрать минус перед значением?

@Atarion · 05.07.2017, 21:09 **[ТС]**

вы тролль или просто плохо понимаете смысл? центрирование это

@AlexZaw · 05.07.2017, 21:40

Извиняюсь, не сразу понял что вы написали, но вам тоже следовало бы приложить нормальный кусок кода, а не то что есть.
Уходит скорее всего потому что ширины экрана не хватает, т.е. left 50% сместило левый край элемента в центр, затем отрицательным маржином мы смещаем элемент влево, и расстояние от левого края окна до элемента при уменьшении экрана становиться меньше чем смещение. Маржин ведь задан жестко, и ему пофиг что позиционированием мы смещаем элемент, он его сдвигает как ему сказано.
Почему кстати не использовать text-align?

@Atarion · 10.07.2017, 10:57 **[ТС]**

ничего не понял. может кто нибудь другой поможет?

@AlexZaw · 10.07.2017, 12:42

Смотрите, допустим ширина экрана 900 пикселей, ширина блока который мы ставим по центру 400 пикселей,
соответственно margin-left мы прописываем -200 пикселей. Теперь от краев блока до левого и правого края экрана 250 пикселей. Когда мы уменьшаем экран у нас так-же уменьшается расстояние от края экрана до блока. Вот стал экран 800 пикселей, соответственно left:50% сместило наш блок на 400 пикселей вправо, а margin-left на 200 пикселей влево, расстояние между блоком и краем экрана стало 200 пикселей.
Уменьшаем экран дальше.
Экран 400 пикселей, left:50% сместило наш блок на 200 пикселей вправо, но и margin-left у нас смещает блок на 200 пикселей влево, расстояние между блоком и краем экрана стало 0.
Еще уменьшаем экран, ширина 300 пикселей, left:50% сместило наш блок на 150 пикселей вправо, а вот margin-left пытается сдвинуть блок на 200 пикселей влево, но у нас нет этих 200 пикселей, у нас всего 150, поэтому отрицательный маржин вытягивает блок за пределы экрана. Надеюсь так понятнее

@Atarion · 10.07.2017, 13:25 **[ТС]**

да вы что! просто поразительно. Никогда бы не догадался бы что именно поэтому.

@AlexZaw · 10.07.2017, 13:44

Ну если вы хотите конкретный ответ, то смотрите второе сообщение в этой теме. Не будет отрицательного маржина - не будет уезжать за край. Хотя вам же тот ответ не понравился почему то.
ЗЫ: Если вы все знаете зачем задаете вопросы?

@Atarion · 10.07.2017, 15:39 **[ТС]**

как сделать центрирование с position absolute но чтобы останавливалось у левого края?

@zuluss · 10.07.2017, 17:52

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

@AlexZaw · 10.07.2017, 19:29

HTML5
1
2
3
<div class="outer">
<div class="inner"></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.outer{position: relative;
  background: #f00;
  width: 100vw;
  height: 100vh;
}
.inner{
  background: #ff0;
  width: 200px;
  height: 200px;
  margin:auto;
  position: absolute;
  left:0;
  right: 0;
}

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

@Atarion · 10.07.2017, 21:54 **[ТС]**

да. вроде оно. спасибо!

Добавлено через 31 минуту
хотя нет, не совсем. ведь там стоит margin:auto - это он без никакого внешнего дива и так будет верно работать.
но похоже тут ведь не будет реакции на left right -то есть при таком центрировании мы не можем его "двигать туда-сюда"
а может можно как то сделать именно с left 50% и margin - left чтобы не уходил?

@zuluss · 10.07.2017, 23:40

вам шашечки нужны или ехать?

@AlexZaw · 10.07.2017, 23:50

Я маленько не понял, если блок нужен по центру, то зачем его еще двигать куда-то? но если уж так необходимо то просто меняем значение left или right, в зависимости от того куда нужно сдвинуть и блок будет двигаться в нужную сторону от центра.
А с отрицательными маржинами всегда есть опасность что блок уедет, впрочем как и вообще с жестко заданными размерами, тут или в процентах задавать или через медиа запросы уменьшать размеры

@Atarion · 11.07.2017, 10:10 **[ТС]**

да вроде сдвигается, благодарю.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Atarion 8 / 8 / 1 Регистрация: 01.04.2016 Сообщений: 622

	При уменьшении экрана браузера блок уходит за левый край экрана 05.07.2017, 11:35. Показов 18799. Ответов 14 Метки нет (Все метки) left 50% и margin-left:-width/2 при уменьшении экрана браузера уходит за левый край экрана. как этого избежать? 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	05.07.2017, 17:32
	Убрать минус перед значением? 0

@Atarion 8 / 8 / 1 Регистрация: 01.04.2016 Сообщений: 622
	05.07.2017, 21:09 [ТС]
	вы тролль или просто плохо понимаете смысл? центрирование это 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	05.07.2017, 21:40
	Извиняюсь, не сразу понял что вы написали, но вам тоже следовало бы приложить нормальный кусок кода, а не то что есть. Уходит скорее всего потому что ширины экрана не хватает, т.е. left 50% сместило левый край элемента в центр, затем отрицательным маржином мы смещаем элемент влево, и расстояние от левого края окна до элемента при уменьшении экрана становиться меньше чем смещение. Маржин ведь задан жестко, и ему пофиг что позиционированием мы смещаем элемент, он его сдвигает как ему сказано. Почему кстати не использовать text-align? 0

@Atarion 8 / 8 / 1 Регистрация: 01.04.2016 Сообщений: 622
	10.07.2017, 10:57 [ТС]
	ничего не понял. может кто нибудь другой поможет? 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	10.07.2017, 12:42
	Смотрите, допустим ширина экрана 900 пикселей, ширина блока который мы ставим по центру 400 пикселей, соответственно margin-left мы прописываем -200 пикселей. Теперь от краев блока до левого и правого края экрана 250 пикселей. Когда мы уменьшаем экран у нас так-же уменьшается расстояние от края экрана до блока. Вот стал экран 800 пикселей, соответственно `left:50%` сместило наш блок на 400 пикселей вправо, а `margin-left` на 200 пикселей влево, расстояние между блоком и краем экрана стало 200 пикселей. Уменьшаем экран дальше. Экран 400 пикселей, `left:50%` сместило наш блок на 200 пикселей вправо, но и `margin-left` у нас смещает блок на 200 пикселей влево, расстояние между блоком и краем экрана стало 0. Еще уменьшаем экран, ширина 300 пикселей, `left:50%` сместило наш блок на 150 пикселей вправо, а вот `margin-left` пытается сдвинуть блок на 200 пикселей влево, но у нас нет этих 200 пикселей, у нас всего 150, поэтому отрицательный маржин вытягивает блок за пределы экрана. Надеюсь так понятнее 0

@Atarion 8 / 8 / 1 Регистрация: 01.04.2016 Сообщений: 622
	10.07.2017, 13:25 [ТС]
	да вы что! просто поразительно. Никогда бы не догадался бы что именно поэтому. 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	10.07.2017, 13:44
	Ну если вы хотите конкретный ответ, то смотрите второе сообщение в этой теме. Не будет отрицательного маржина - не будет уезжать за край. Хотя вам же тот ответ не понравился почему то. ЗЫ: Если вы все знаете зачем задаете вопросы? 0

@Atarion 8 / 8 / 1 Регистрация: 01.04.2016 Сообщений: 622
	10.07.2017, 15:39 [ТС]
	как сделать центрирование с position absolute но чтобы останавливалось у левого края? 0

@zuluss 28 / 28 / 8 Регистрация: 23.12.2015 Сообщений: 97
	10.07.2017, 17:52
	напишите полный код блока и получите помощь PS. сейчас лето, гадалки все на моря уехали на заработки 0

@Atarion 8 / 8 / 1 Регистрация: 01.04.2016 Сообщений: 622
	10.07.2017, 21:54 [ТС]
	да. вроде оно. спасибо! Добавлено через 31 минуту хотя нет, не совсем. ведь там стоит margin:auto - это он без никакого внешнего дива и так будет верно работать. но похоже тут ведь не будет реакции на left right -то есть при таком центрировании мы не можем его "двигать туда-сюда" а может можно как то сделать именно с left 50% и margin - left чтобы не уходил? 0

@zuluss 28 / 28 / 8 Регистрация: 23.12.2015 Сообщений: 97
	10.07.2017, 23:40
	вам шашечки нужны или ехать? 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	10.07.2017, 23:50
	Сообщение было отмечено Atarion как решение Решение Я маленько не понял, если блок нужен по центру, то зачем его еще двигать куда-то? но если уж так необходимо то просто меняем значение left или right, в зависимости от того куда нужно сдвинуть и блок будет двигаться в нужную сторону от центра. А с отрицательными маржинами всегда есть опасность что блок уедет, впрочем как и вообще с жестко заданными размерами, тут или в процентах задавать или через медиа запросы уменьшать размеры 1

@Atarion 8 / 8 / 1 Регистрация: 01.04.2016 Сообщений: 622
	11.07.2017, 10:10 [ТС]
	да вроде сдвигается, благодарю. 0

При уменьшении экрана браузера блок уходит за левый край экрана

Решение