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始终为零或十二。如果它为零，最初，一切都设置正确。然后，如果是12，则适当地设置上边距。但是当我到达marginTop为零的下一个项目时，它不会将事物重新放回原位。我该如何垂直对齐这些东西？它真的不像垂直居中应该是这么难...

Answer 1

尝试使用'margin-top'而不是'marginTop'

Answer 2

这样做：

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。然后，在孩子（文本的容器）上，将line-height设置回“normal”，并设置display:inline-block（这是必要的）。

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

Answer 3

<table><tr><td>
    <p>I wont tell anyone if you dont. Inline CSS for extra points.</p>
</td></tr></table>

jquery marginTop无法正常工作

3 个答案: