ホームページ > ウェブフロントエンド > htmlチュートリアル > div+css ページ レイアウト中心_html/css_WEB-ITnose

div+css ページ レイアウト中心_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
リリース: 2016-06-24 12:27:23
オリジナル
1092 人が閲覧しました

ページ全体の上部と下部を中央揃えにしたい場合は、それらを全体にする必要があります。本文の 2 つの部分が 1 つの全体に含まれるように、 タグにクラスを追加しました。次に、全体の を設定します:

.mainLayout {    position :absolute;    left : 50%;    top : 50%;    width : 910px;    margin-top : -270px;    margin-left : -455px;}
ログイン後にコピー

これは、絶対位置と負のマージン値を使用して実現されます。

left:50% を指定すると、メインレイアウト コンテナ全体がブラウザの水平方向の中点から右に表示されます。このとき、ブラウザの左半分は空になります。

次に、margin-left を mainlayout コンテナの半分に設定します。これを負の値に設定すると、コンテナが左に移動します。つまり、コンテナ全体がブラウザの中央から半分だけ左に移動します。メインレイアウトコンテナ)。このようにして、メインレイアウトコンテナを左右中央に表示することができます。

中央表示の原理は同じです: 最初の上: コンテナを垂直方向の中点から下に 50% 表示し、上のスペースの半分を残します。次に、メインレイアウト コンテナの半分を上に移動して、垂直方向の中央に配置します。

元のリンク: http://my.oschina.net/suyewanwan/blog/110784

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート