0

既知の高さの 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 は常に 0 または 12 です。ゼロの場合、最初はすべてが適切に設定されています。次に、12 の場合、上余白を適切に設定します。しかし、marginTop が 0 の次の項目に到達すると、元の場所に戻されません。このものを垂直方向に揃えるにはどうすればよいですか? 垂直方向のセンタリングがこれほど難しいとは思えません...

4

3 に答える 3

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 に答える