ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS_CSS/HTML を使用して DIV レイヤーを中央に配置する方法

CSS_CSS/HTML を使用して DIV レイヤーを中央に配置する方法

WBOY
リリース: 2016-05-16 12:11:16
オリジナル
1702 人が閲覧しました

DIV を中央に配置する方法
主なスタイル定義は次のとおりです:

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
説明:

まず、親要素で TEXT-ALIGN: center を定義します。これは、IE では親要素のコンテンツが中央に配置されることを意味します。この設定で十分です。ただし、mozilla の中心に置くことはできません。解決策は、子要素の定義

を設定するときに「MARGIN-RIGHT: auto;MARGIN-LEFT: auto;」を追加することです。

この方法を使用してページ全体を中央に配置したい場合は、DIV に配置しないことをお勧めします。MARGIN-RIGHT を定義している限り、複数の div を順番に分割できます。各分割 div. : auto;MARGIN-LEFT: auto; で済みます。

DIV 内で画像を垂直方向の中央に配置する方法
背景メソッドを使用します。例:

body{BACKGROUND: url(http://www.w3cn.org/style/001/logo_w3cn_194x79.gif) #FFF no-repeat center;}
キーは最後のセンターです, このパラメータは画像の位置を定義します。 「top left」(左上隅)や「bottom right」などを書くこともできます。「50 30」という値を直接書くこともできます

効果は次のとおりです:

DIV 内のテキストを垂直方向に中央揃えにする方法
テキストの場合、行間を広げる方法を使用して垂直方向の中央揃えを実現できます。






テスト内容




説明:

vertical-align:middle; 行内の垂直方向の中央揃えを意味し、行間隔を DIV 全体の行の高さ 200px と同じ高さに増やしてからテキストを挿入すると、垂直方向の中央揃えになります。

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