Вертикальное центрирование выравнивать DIV в DIV

соседний

сказать, у меня естьВертикальное центрирование выравнивать DIV в DIV

<div id ="outer" class="outer"> 
    <div id= "inner" class="inner"> 
     //some stuff 
    </div> 
</div>

внутренний DIV имеет динамическую высоту, она меняется в зависимости от того, что находится внутри DIV. внешний div - это просто контейнер, который имеет высоту окна.

Я хочу установить его так, чтобы внутренний div был вертикально центрирован внутри внешнего div. Есть ли способ сделать это легко в CSS или необходим JavaScript?

РЕШЕНИЕ Я НАШЕЛ:

var container= document.getElementById("outer"); 
var inner= document.getElementById("inner"); 
var inHeight=inner.offsetHeight; 

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

var conHeight=container.offsetHeight; 

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

В случае, если кто-то ищет решения той же проблемы, что это работает для меня.

выделенный текст

источник

2012-02-16 moesef

Связанный вопрос с некоторыми полезными предложениями: http://stackoverflow.com/questions/7206640/css-vertically-align-div-when-no-fixed-size-of-the-div-is-known – Artyom

попробовать это http://jsfiddle.net/gLChk/12/

, но это не будет поддерживаться в IE < 8 браузеров. Для того, чтобы заставить его работать на всех браузерах, вам придется написать JS, который будет найти высоту .inner и применить эти свойства CSS

$(document).ready(function(){ 
var inner = $('.inner'), 
    ht = inner.height(); 

inner.css({'position':'absolute','top':'50%','margin':-ht/2+'px 0 0 0'}); 
});

Надеется, что это помогает. :)

источник

2012-02-16 09:05:39 Abhidev

Я думаю, что я сделал почти то же самое, только используя JS вместо JQuery. см. мой вопрос. Я добавил решение, с которым я столкнулся. – moesef

Ох ... ну, я не видел вашего обновленного ответа ... хорошо, что тоже будет работать. :) – Abhidev

буквально делает то же самое, но только по-разному. – moesef

-3

использование:

.inner 
{ 
    margin-top:auto; 
    margin-bottom:auto; 
}

источник

2012-02-16 08:06:38 Hadas

Я действительно пробовал это, и это не сработает [jsFiddle] (http://jsfiddle.net/UrFJH/) – CyrillC

Я действительно думаю, что это сработает ... но оказывается, что мой внешний div не установлен на высоту и ширина окна .... – moesef

Это [не работает] (http://jsfiddle.net/8sdEn/) вертикально только горизонтально – PeeHaa

-1

Попробуйте с

.inner { 
top: 50%; 
bottom: 50%;  
}

jsfiddle

приветствует

источник

2012-02-16 08:12:20 CyrillC

С помощью этого метода вам не нужно вычитать высоту внутреннего div/2 от 50%, чтобы получить «точное» теоретическое центрирование? – dougajmcdonald

@dougajmcdonald вы правы ... – CyrillC

если вы проверите его правильно, его не точно вертикально посередине. – Abhidev

.outer { 
    display: table; 
    position: relative; 
    width:100%; 
    height:200px; 
    border:1px red solid; 
} 
.inner { 
    display: table-cell; 
    position: relative; 
    vertical-align: middle; 
}

источник

2012-02-16 08:16:14 Desigens

Обратите внимание, что это не сработает в IE7 – mkk

Вертикальное центрирование выравнивать DIV в DIV

ответ

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