ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS を使用して DIV を中央に配置する方法
今日私が持ってきたコードは、多くの友人が DIV センタリングを実現するために使用する必要があるものです。将来、CSS を使用して DIV センタリングを実現する必要がある場合は、この記事を保存しておくと便利です。これを実現するには CSS を使用します。今回は、比較的単純で互換性の高いコードを紹介します。
必要な主な CSS コードは 2 つあり、1 つは text-align:center (コンテンツが中央に配置される)、もう 1 つは margin:0 auto です。中央揃えの表示レイアウトを実現するには、2 つのスタイルを一緒に使用する必要があります。 div ボックス。
まず本文に text-align:center を設定し、次に中央揃えが必要な div ボックスに CSS スタイル margin:0 auto を設定して、対応する div が水平方向に中央揃えになるようにします。
divセンタリングコード適用の説明 divセンタリングの効果を確認するために、divにdivを設定し、htmlのdivタグにclass="div"という名前を付けて設定します。幅は 400 ピクセル、高さは 100 ピクセルに、赤い枠線が付きます。効果を観察できるように。
1. 完全な html+css コード
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>div居中 在线演示 www.divcss5.com</title> <style> body{ text-align:center} .div{ margin:0 auto; width:400px; height:100px; border:1px solid #F00} /* css注释:为了观察效果设置宽度 边框 高度等样式 */ </style> </head> <body> <div class="div"> DIVCSS5实例 </div> </body> </html>
div センタリング コード アプリケーションの機能
このセンタリング方法により、IE の上位バージョンか上位バージョンかに関係なく、div センタリング効果がすべての主要なプラットフォームおよびブラウザーと完全に互換性があります。 IEのバージョン。
上記は CSS を使用して DIV を中央に配置する方法です。
関連する推奨事項:
さまざまな基本的なグラフィックを描画するための CSS3 のヒント
以上がCSS を使用して DIV を中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。