ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSでdivを中央に配置するにはどうすればよいですか? CSSでdivを中央揃えにする方法

CSSでdivを中央に配置するにはどうすればよいですか? CSSでdivを中央揃えにする方法

云罗郡主
リリース: 2018-11-21 14:02:12
オリジナル
5019 人が閲覧しました

div を水平方向に中央揃えするにはどうすればよいですか? divを中央に配置するにはどうすればよいですか?この記事では、cssでdivを中央揃えにする方法について解説します。そして、divのセンタリングを実現する方法。

Web を閲覧すると、一般的な Web サイトの本文はページの中央にあり、div が中心に配置されていることを認識する限り、ブラウザの中央に表示されます。条件はブラウザのセンタリング条件と一致します。

一番外側の div ボックスに php1 という名前を付ける場合、本文のスタイルを中央に設定するだけで済みます。コードは次のとおりです。

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

この時点では、php1 を設定する必要があります。 box を margin:0 auto に設定する場合、コードは次のとおりです。

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

効果を観察しやすくするために、php1 に高さ 100px、幅 300px の黒い境界線を追加します。

コードは次のとおりです:

<div id="php1">php中文网div居中效果演示</div>
ログイン後にコピー

表示効果は次のとおりです:

CSSでdivを中央に配置するにはどうすればよいですか? CSSでdivを中央揃えにする方法

CSS スタイルで、 div を中央に配置するには、オブジェクトを margin: 0 auto スタイルに設定するだけで済みます。ただし、一部のブラウザでは、ブラウザとの互換性を保つために、上記の方法を使用して設定できます。

上記はCSSでdivを中央に配置する方法です。 CSS を使用して div を中央揃えにする方法の完全な紹介。CSS3 チュートリアル について詳しく知りたい場合は、php 中国語 Web サイトに注目してください。


以上がCSSでdivを中央に配置するにはどうすればよいですか? CSSでdivを中央揃えにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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