ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで本文のコンテンツを中央に配置する方法
CSS で本文コンテンツを中央揃えにする方法: 1. マージンを使用してマージンを「0 auto」に設定し、HTML ページ内のすべての要素を水平方向に中央揃えにします。 2. div と左端との間の距離を設定します。ページ ウィンドウの上の境界線。「50%」に設定します。 3. jQuery を使用して、水平方向と垂直方向の中央揃えを実現します。
このチュートリアルの動作環境: 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 サイトの他の関連記事を参照してください。