0

我试图在已知高度的 div 中垂直居中未知高度的文本。我已经尝试了 cssdisplay: 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 为零的下一个项目时，它不会将事物弹回原来的位置。我怎样才能垂直对齐这些东西？看起来垂直居中真的不应该这么难......

4

3 回答 3

1

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

于 2011-03-20T11:55:24.423 回答
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. 然后，在孩子（文本的容器）上，您设置line-height回“正常”，并设置display:inline-block（这是必要的）。

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

于 2011-03-20T12:13:24.827 回答
0 
<table><tr><td>
    <p>I wont tell anyone if you dont. Inline CSS for extra points.</p>
</td></tr></table>
于 2011-03-20T11:53:59.043 回答