jquery marginTop 无法正常工作

Question

我试图将未知高度的文本在已知高度的 div 中垂直居中。我已经尝试了 css display: table-cell 选项，但它没有用，所以我使用 jQuery 来检测高度，然后在必要时应用上边距，以完成居中 - 当需要调整某些内容时它会起作用，但随后无法重新调整它以使其顶部边距为零。

这是我的功能:

function change_trend(){
            trend_text = $('#trends_holder img:eq(' + item_count + ')').attr('data-content');
            $('.trend_text').text(trend_text);
            var trendMargin = $('.trends_scroller').height() - $('.trend_text').innerHeight();
            $('.trend_text').css('marginTop',trendMargin);
}

变量 trendMargin 始终为零或十二。如果它为零，则最初一切都已正确设置。然后如果是十二，它会适本地设置上边距。但是当我到达 marginTop 为零的下一个元素时，它不会将东西弹回到原来的位置。我怎样才能垂直对齐这些东西？垂直居中似乎真的不应该这么难......

Answer 1

这样就可以了:

HTML:

<div>
    <p> Some text here <br> Some more text here. </p>
</div>

CSS:

div { 
    line-height:300px; 
}

p { 
    line-height:1em; 
    display:inline-block;        
    width:100%; 
}

要设置 DIV 的高度，您可以使用 line-height 而不是 height。然后，在 child (文本容器)上，将 line-height 设置回“normal”，并设置 display:inline-block(这是必要的).

现场演示: http://jsfiddle.net/simevidas/5qXMj/1/