ホームページ >毎日のプログラミング >HTMLの知識 >Div の水平方向のセンタリング効果を実現する方法
Div の水平方向のセンタリング効果を実現する方法
- 藏色散人オリジナル
- 2018-11-09 11:12:269460ブラウズ
この記事では、div水平センタリングを実現するための具体的な方法を中心に紹介します。
HTML/CSS の初心者にとって、div を中央揃えにするさまざまな方法 (水平方向の中央揃え、垂直方向の中央揃えなど) を誰もが知っておく必要があります。結局のところ、優れた div レイアウトが Web ページ作成の鍵となります。 . 基本的なコンポーネント。
推奨参考:「html チュートリアル」
以下では、簡単な方法で div 水平センタリング を実現する方法を紹介します。例 。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Div水平居中</title>
</head>
<body>
<div style="text-align: center;margin: 0 auto;background: red;width: 100px;">
PHP中文网
</div>
</body>
</html>効果を以下の図に示します。
ここでは主にスタイル属性「text-align: center」を使用します。 ;」と「margin: 0 auto;」。
text-align この属性は、要素内のテキストの水平方向の配置を示します。属性値 center は、テキストが中央に配置されることを意味します。
margin 短縮属性は、1 つのステートメントですべてのマージン属性を設定します。属性値は 0 auto です。これは、ブラウザがマージンを計算し、0 になることを意味します。
margin と text-align の違いをより直感的かつ明確に理解できるように、各属性の役割を詳しく示します。
1. 上記のコードで div の幅をキャンセルすると、次のような結果になります。図から、div の幅を設定せずに text-align 属性と margin 属性を指定した場合、div 内のコンテンツは依然として水平方向に中央揃えのままであることがわかります。
注: 
すべてのブラウザは、text-align 属性と margin 属性をサポートしています。
要約すると、指定した div の水平方向の中央揃えを実現するには、「text-align: center;」と「margin: 0 auto;」の 2 つの属性を一緒に使用する必要があります。
この記事は、Div の水平方向のセンタリングを実現するための具体的な方法について説明しています。非常に簡単で、困っている友人の役に立てば幸いです。
以上がDiv の水平方向のセンタリング効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。