CSSを使用してDIVの水平方向のセンタリングを実現する-CSSチュートリアル-php.cn

CSSを使用してDIVの水平方向のセンタリングを実現する

php中世界最好的语言

リリース： 2020-09-05 11:36:05

オリジナル

24265 人が閲覧しました

CSS を使用して div のセンタリングを設定する方法: まず本文に「text-align:center」を設定し、次に中央に配置する必要がある div ボックスの CSS スタイルを「margin:0 auto」に設定します。水平方向に対応する div。

CSSを使用してDIVの水平方向のセンタリングを実現する

CSS を使用して DIV を中央に配置するにはどうすればよいですか? 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" を使用し、その幅を 400px に設定します。を 100px に、境界線を赤にします。効果を観察できるように。

1. 完全な html+css コード

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title></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>

ログイン後にコピー

2. div+css センタリングの例のスクリーンショット

センタリング効果を実現する div のスクリーンショット

CSSを使用してDIVの水平方向のセンタリングを実現する 3. div センタリングのアプリケーション機能コード