CSSで本文のコンテンツを中央に配置する方法-CSSチュートリアル-php.cn

CSSで本文のコンテンツを中央に配置する方法

藏色散人

リリース： 2022-12-30 11:12:26

オリジナル

16845 人が閲覧しました

CSS で本文コンテンツを中央揃えにする方法: 1. マージンを使用してマージンを「0 auto」に設定し、HTML ページ内のすべての要素を水平方向に中央揃えにします。 2. div と左端との間の距離を設定します。ページウィンドウの上の境界線。「50%」に設定します。 3. jQuery を使用して、水平方向と垂直方向の中央揃えを実現します。

CSSで本文のコンテンツを中央に配置する方法

このチュートリアルの動作環境: Windows 7 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター。

推奨: css ビデオチュートリアル

ページをデザインするとき、多くの場合、DIV を中央に配置し、ページウィンドウに対して水平および垂直に表示する必要があります。ログインウィンドウを中央に配置します。私たちの従来の解決策は、純粋な CSS を使用して DIV を中央に配置することです。この記事では、CSSとjQueryを使ってDIVを水平方向と垂直方向に中央揃えにする方法を説明します。

CSS は DIV を水平方向に中央に配置します

この記事で参照する DIV には、HTML ページ内のすべての要素が含まれることに注意してください。

DIV を水平方向に中央揃えにするには、CSS を使用して直接行うことができます。 DIV の幅を設定し、マージンを使用してマージンを 0 auto に設定している限り、CSS は自動的に左右のマージンを計算して DIV を中央に配置します。

.mydiv{   
    margin:0 auto;   
    width:300px;   
    height:200px;   
}

ログイン後にコピー

しかし、DIV を垂直方向の中央に配置したい場合は、CSS を変更する必要があると思います。

CSS を水平方向と垂直方向の中央揃えにするには、

DIV を水平方向と垂直方向の中央揃えにするには、DIV の幅と高さを知っている必要があり、位置を絶対位置に設定し、ページウィンドウの左端と上端からの距離を 50% に設定します。 50% は、ページウィンドウの幅と高さの 50% を指します。最後に、DIV をそれぞれ左と上に移動します。左と上への移動のサイズは、DIV の幅と高さの半分です。

.mydiv{ 
   width:300px;  
   height:200px;  
   position:absolute;  
   left:50%;  
   top:50%;  
   margin:-100px 0 0 -150px 
}

ログイン後にコピー

この方法はよく使われますが、前提としてDIVの幅と高さを設定する必要があります。ページの DIV の幅と高さが動的である場合、たとえば、DIV レイヤーをポップアップして中央に表示する必要がある場合、DIV のコンテンツは動的であるため、幅と高さも動的です。この場合、 jQuery を使用すると、センタリングの問題を解決できます。

jQuery で水平方向と垂直方向のセンタリングを実現します

jQuery で水平方向と垂直方向のセンタリングを実現する原理は、jQuery を通じて DIV の CSS を設定し、左と上のマージンを取得することです。 DIV のオフセット。シフトとマージンオフセットのアルゴリズムは、ページウィンドウの幅から DIV の幅を減算し、その結果の値を 2 で割った値が左オフセットです。右オフセットのアルゴリズムは次のとおりです。同じ。 DIV の CSS 設定は、resize() メソッド内で完了する必要があることに注意してください。つまり、ウィンドウサイズが変更されるたびに、DIV の CSS 設定が実行される必要があります。コードは次のとおりです。 ## さらに、ページがロードされるときに、resize() を呼び出す必要があります。

$(window).resize(function(){ 
    $(".mydiv").css({ 
        position: "absolute", 
        left: ($(window).width() - $(".mydiv").outerWidth())/2, 
        top: ($(window).height() - $(".mydiv").outerHeight())/2 
    });        
});

ログイン後にコピー

この方法の利点は、DIV の特定の幅と高さを知る必要がないことです。jQuery を直接使用して水平方向と垂直方向の中央揃えを実現でき、さまざまなブラウザーと互換性があります。この方法は、多くのポップアップレイヤーエフェクトで使用されます。

ps: div の幅がページの幅より大きい場合は、本文に css

$(function(){ 
    $(window).resize(); 
});

ログイン後にコピー

を追加する必要があります。

以上がCSSで本文のコンテンツを中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。