4

CSS は素晴らしいものですが、他のコンテナー内で div とテキストを垂直方向に整列させる公式の「標準」方法がないのはなぜですか? 私は自分のレイアウトでテーブルを使用することを拒否します。これはもう 90 年代ではありません!

マージン/パディングを使用するか、行の高さを適切に配置して垂直方向に揃えて、コンテンツを垂直方向の中央に表示する方法があることを知っています (これはまったく最適ではありません)。テキスト コンテンツと同じコンテナー内に指定された高さの div があり、垂直方向に中央揃えにする必要がある場合、マージンの使用は機能しません。テキスト サイズはブラウザーによって異なるため、実際にはすべてのブラウザーで中央揃えになるわけではありません。

現在の最新のブラウザーでテーブルを使用せずに、CSS のみを使用してコンテンツを垂直方向に簡単に中央揃えする方法があるかどうか、またはいつになるか、ANYBODY は知っていますか?

4

3 に答える 3

2

すべてのニーズに柔軟に対応できる軽量の jQuery プラグインを使用することをお勧めします。例を次に示します。

(function ($) {
// VERTICALLY ALIGN FUNCTION
$.fn.vAlign = function() {
    return this.each(function(i){
    var ah = $(this).height();
    var ph = $(this).parent().height();
    var mh = Math.ceil((ph-ah) / 2);
    $(this).css('margin-top', mh);
    });
};
})(jQuery);

次に、必要なセレクターで関数を使用するだけです。

$('#example p').vAlign();
于 2012-05-18T10:48:41.827 に答える
1

この記事を確認することをお勧めします。この記事では、任意の幅と高さの子要素を垂直方向に中央揃えするCSSのみの手法を紹介しています。

于 2012-05-18T10:55:45.207 に答える
0

これを試すことができます：

<div style="display:table-cell; vertical-align:middle"> ... </div>

他のすべての方法をリストしたと思います

于 2012-05-18T11:13:03.040 に答える