今日私が持ってきたコードは、多くの友人が 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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
