Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Центрирование элемента (https://javascript.ru/forum/events/65581-centrirovanie-ehlementa.html)

dpts 27.10.2016 14:12

Центрирование элемента
 
Приветствую.
Есть js
<script>
  		var fullWidth = document.documentElement.clientWidth;
		var pos = fullWidth/2 - 22;
      	document.getElementById("mmb").style = ("bottom:25px;left:" + pos + "px;");
  	</script>

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

Aetae 27.10.2016 14:32

Классика же:
<div style="
  position: absolute;

  bottom: 25px;
  left: 50%;

  width: 44px;
  margin-left: -22px;

  background: #99f;
">div</div>
В современном css существует ещё десяток способов это сделать. Js тут точно не нужен.

Но на будущее:
window.addEventListener('resize', function(){
  //код здесь
})
Однако следует стремиться решать подобные задачи правильной вёрсткой, тем более в 99% случаев это возможно.

dpts 27.10.2016 14:41

Цитата:

Сообщение от Aetae (Сообщение 433090)
Классика же:
<div style="
  position:absolute;
  bottom:25px;
  left: 50%;
  margin-left: -22px;

  background: #99f;
  width: 44px;
">div</div>

В современном css существует ещё десяток способов это сделать. Js тут точно не нужен.

Действительно, в современом css существует вагон способов сделать это.
Вот только в данном случае нужен js. потому и спросил, мой случай - какраз в 1% попадает.

Благодарю.

Rise 27.10.2016 14:44

dpts,
#mmb {
	width: 44px;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 25px;
}

Aetae 27.10.2016 14:44

Цитата:

Сообщение от dpts (Сообщение 433091)
Вот только в данном случае нужен js. потому и спросил.

Слабо представляю такой случай, но даже так - лучше один раз из js задать элементу подходящий css и забыть о нём, чем каждый раз пересчитывать.:)

Rise, это уже не классика, а потому не интересно.)

рони 27.10.2016 14:51

:)
<div style="
  width: 44px;
  margin: 25px auto;
  background: #99f;
">div</div>


Часовой пояс GMT +3, время: 10:46.