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

@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 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .

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

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

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

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

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

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

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

Решение