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

@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

.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 **[ТС]**

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

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

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

@AlexZaw 1322 / 1103 / 482 Регистрация: 07.08.2016 Сообщений: 3,041
	05.07.2017, 17:32	2
	Убрать минус перед значением? 0

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

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

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

@AlexZaw 1322 / 1103 / 482 Регистрация: 07.08.2016 Сообщений: 3,041
	10.07.2017, 12:42	6
	Смотрите, допустим ширина экрана 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 1 / 1 / 0 Регистрация: 01.04.2016 Сообщений: 341
	10.07.2017, 13:25 [ТС]	7
	да вы что! просто поразительно. Никогда бы не догадался бы что именно поэтому. 0

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

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

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

Опции темы

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

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

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

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

Решение