Вертикальный центр div с Javascript (переменная высота)

Я пытаюсь вертикально центрировать div с помощью Javascript. Поскольку текст будет меняться, я не могу использовать фиксированную высоту.Вертикальный центр div с Javascript (переменная высота)

Я хотел бы это сделать без JQuery.

#box2 { 

    width: 100%; 
    height: 100%; 
    position:relative; 
    background-color: orange; 

} 
      #informationBox { 

      padding: 0.5em; 
      background-color: #fff; 
      border-radius: 12pt; 
      border: solid black 3pt; 
      max-width: 683px; 
      margin: 0 auto; 
      text-align: center; 
     }

Javascript:

var container = document.getElementById("#box2"); 
var inner = document.getElementById("#informationBox"); 
var inHeight = inner.offsetHeight; 

container.style.height=(window.innerHeight); 
container.style.width=window.innerWidth; 

var conHeight=container.offsetHeight; 

inner.style.marginTop=((conHeight-inHeight)/2);

Любая помощь будет здорово :)

http://jsfiddle.net/tmyie/EttZQ/

источник

2013-06-18 Anonymous

Вы очень много есть, вам просто нужно изменить пару вещей. Во-первых, getElementById принимает только строку id, а не селектор. Во-вторых, вам нужно добавить 'px' к вашему объявлению стиля.

var container = document.getElementById("box2"); 
var inner = document.getElementById("informationBox"); 
var inHeight = inner.offsetHeight; 
container.style.height = window.innerHeight; 
container.style.width = window.innerWidth; 
var conHeight = container.offsetHeight; 

inner.style.marginTop = ((conHeight-inHeight)/2)+'px';

Вот обновленная скрипка: http://jsfiddle.net/EttZQ/1/

источник

2013-06-18 21:23:52 rgthree

Это замечательно. На фактическом сайте контейнер установлен в относительный. Это нарушает код jsfiddle. Есть ли решение, если контейнер относительный? –

Сделать контейнер позы ничего, кроме статического. Коробка: абсолютная. top: 50% При изменении высоты окна установите край поля сверху на -1 * height/2.

источник

2013-06-18 21:25:28 CodeToad

Одно простое решение для CSS.

http://jsfiddle.net/antouank/EttZQ/2/

body { 
    margin: 0; 
} 
#box2 { 
    width: 100%; 
    height: 100%; 
    position:absolute; 
    background-color: orange; 
} 
#informationBox { 
    padding: 0.5em; 
    background-color: #fff; 
    border-radius: 12pt; 
    border: solid black 3pt; 
    max-width: 100px; 
    margin: 0 auto; 
    text-align: center; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
}

Вам только нужно рассчитать ширину/высоту вашего элемента и изменить 50% на то, что вам нужно в центр.

источник

2013-06-18 21:29:10 AntouanK

Использование js с собственностью line-height.

нет javascript и точное центрирование.

коробка/информация может иметь мин/макс-ширина/высота &% или точек ...

также изменяет с окном.

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>center</title> 
<style> 
html,body{ 
width:100%; 
height:100%; 
margin:0; 
padding:0; 
} 
#box{ 
width:100%; 
height:100%; 
text-align:center; 
} 
#info{ 
display:inline-block; 
margin:0;padding:0 16px; 
line-height:24px; 
border-radius: 12pt; 
border: solid black 3pt; 
text-align: center; 
vertical-align:middle; 
box-sizing: border-box; 
} 
</style> 
<script> 
var center=function(){ 
var b=document.getElementById('box'); 
b.style['line-height']=b.offsetHeight+'px'; 
} 
window.onload=center; 
window.onresize=center; 
</script> 
</head> 
<body> 
<div id="box"><div id="info">center me pls<br>test</div></div> 
</body> 
</html>

источник

2013-06-18 21:43:48 cocco

Вертикальный центр div с Javascript (переменная высота)

ответ

Смежные вопросы