применение вертикального центра javascript для нескольких divs

Question

После нескольких часов, пытаясь разобраться в этом, я чувствую необходимость обратиться к тому, кто знает лучше меня. У меня есть функция, которая центрирует дочерний div внутри родительского div. Все работает единственная проблема: размер дочернего div изменяется, поэтому мне нужен способ применить эту функцию к каждому div отдельно.

вот мой код

HTML

<div class="outer"> 
<div class="inner">short text in here</div> 
</div> 

<div class="outer"> 
<div class="inner">some text in here more text here that is longer. This is longer</div> 
</div> 

CSS

.outer{background:#eee;height:150px;width:150px;margin-bottom:20px;} 
.inner{width:130px;padding:10px;text-align:center;} 

JAVASCRIPT

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

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

http://jsfiddle.net/AMNVY/

Answer 1

Does this work for you?

Все, что я сделал, то отредактируйте CSS:

.outer{ 
    background:#eee; 
    height:150px; 
    width:150px; 
    margin-bottom:20px; 
    display: table; 
} 
.inner{ 
    width:130px; 
    padding:10px; 
    text-align: center; 
    vertical-align: middle; 
    display: table-cell; 

}

нет необходимости в Js ...

Answer 2

Если вам все еще нужно JavaScript здесь это мое решение .. Вы можете использовать эту привязку для получения высоты каждый раз, когда она изменяется, тогда вы должны иметь возможность создать алгоритм управления css.

JS:

$('#inner').bind('getheight', function() { 
    $('#inner').height(); 
});