ホームページ > 記事 > ウェブフロントエンド > Div+Css は背景の水平方向と垂直方向のセンタリングを制御します image_html/css_WEB-ITnose
Div+Css は背景の水平方向と垂直方向のセンタリングを制御します image_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:29:371188ブラウズ
Web 開発では、この問題によく遭遇します。ページの背景画像を設定した後、その画像が比較的大きな解像度で水平方向と垂直方向の中央に表示されることを期待することがよくあります。通常、水平方向の中央揃えは CSS で簡単に実現できますが、垂直方向の中央揃えにはいくつかの CSS テクニックを使用する必要があります。
まず、Web サイトをブラウザのサイズに応じて適応させるには、高さを変更する必要があります。ページの body 要素 値は 100% に設定されていますが、その前に、Web サイトのヘッダーから xhtml 検証を削除する必要があります。
次の CSS ファイルをページに追加して、本文の高さを 100% に設定し、HTML 要素を FF と互換にするように設定します:
2. 次に、最も外側の div 要素の高さと幅を 100% に設定する必要があります:
4. 次に、背景画像を設定する必要がある div 要素を内部 div に配置します。要素を作成して CSS を設定します。 属性は次のとおりです。
.login_background
{height:600px;
width:1000px; background-image:url(images/login_background.png);
background-repeat:no-repeat;
background-position:center center;
margin:0px auto;
+position:relative;
top:-50%;
left:-50%;
}
このようにして、ページのサイズを調整できますさまざまなブラウザに合わせて調整でき、背景画像をディスプレイの垂直方向と水平方向の中央に配置することもできます。
IE8 の F11 モードで有効であることがテストされています。