ホームページ > 記事 > ウェブフロントエンド > CSS を使用して DIV を中央に配置する方法

CSS を使用して DIV を中央に配置する方法

php中世界最好的语言オリジナル: 2017-11-20 11:07:522937ブラウズ

今日私が持ってきたコードは、多くの友人が 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 を中央に配置する方法です。

CSS を使用して DIV を中央に配置する方法

関連記事