ホームページ > ウェブフロントエンド > htmlチュートリアル > HTML で div を中央に配置するときは何に注意する必要がありますか?

HTML で div を中央に配置するときは何に注意する必要がありますか?

php中世界最好的语言
リリース: 2017-11-23 17:18:30
オリジナル
2333 人が閲覧しました

そんな疑問を持っている人も多いでしょう。 Web ページをレイアウトするとき、通常は Web ページのメインフレームがブラウザーの中央に配置されます。したがって、最も外側の DIV の水平方向のセンタリングを実現したい場合は、必ず個別に設定する必要があります。 divを中央揃えに設定する際に注意すべき点は何ですか?今日はそれを紹介しましょう。

一番外側のDIVボックスのCSS名が「#divcss5」の場合、主要なブラウザと互換性を持たせるため、一番外側のボックスが中央揃えになります。

第一条件:

このとき、「body」にCSSコンテンツの中央揃えスタイル(text-align:center)を設定する必要があります

つまり、CSSコード:

body{text-align:center}
ログイン後にコピー

第一設定:

At今回は、「#divcss5」スタイルのCSSマージンを設定する必要があります

はCSSコードです:

#divcss5{margin:0 auto}
ログイン後にコピー

DIVセンタリングの使用例

レイアウトのセンタリング効果を観察しやすくするために、CSSを追加します境界線を「#divcss5」に黒枠、CSS幅300px、高さ100pxで設定します。

1. 最後に、DIV を中央に配置するための CSS コードを取得します:

body{ text-align:center} 
#divcss5{margin:0 auto;border:1px solid #000;width:300px;height:100px}
ログイン後にコピー

2. 対応する HTML コード スニペット:

<div id="divcss5">DIV水平居中案例</div>
ログイン後にコピー

div を中央に配置する際には、注意すべき点がたくさんあります。 PHP 中国語 Web サイトの他の関連記事へ!

関連する推奨事項:

HTMLの

タグの使い方

HTML文書型宣言の書き方

CSS3で円形画像を表示する方法

以上がHTML で div を中央に配置するときは何に注意する必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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