ブロック要素を中央揃えにするにはどうすればよいですか?

CSS の margin プロパティを使用すると、ブロック要素 (div など) を水平方向に中央揃えにすることができます。要素の幅を設定して、コンテナーが伸びるのを防ぐことができます。ブロック要素はスペースの全行を占有し、ブロック要素がコンテナの 100% を所有するため、他の要素が次の行を占有することになります。

ブロック要素を中央揃えにします

Web ページ上の新しい行で始まる要素はすべて、ブロック レベルの要素とみなされます。たとえば、title タグ、div などです。

これらのブロック要素は、Web ページの幅全体を占めます。 Web ページ上に Web ページの 10% のみを占める要素があるとします。しかし、それがブロック要素の場合は、幅そのものの 100% を占めることになります。

値を block 属性に設定することで、特定の要素の表示属性を変更できます。

構文

表示プロパティを見てみましょう -

リーリー

上記は、Web ページ上の特定の要素の外観を定義するために使用できる表示属性の構文です。

マージンのプロパティ

ブロック要素の動作がわかったので、margin プロパティを使用して要素を水平に配置します。

margin 属性はブロック要素の位置を制御します。余白は horizo​​ntal 平面と vertical 平面の両方で要素を制御するため、要素が中央に配置されるようにこのプロパティを使用します。

＃＃＃文法＃＃＃

マージン属性の構文を見てみましょう -

リーリー

ここに margin 属性の構文を示します。ブロック要素が中央に配置されるように、margin は左から右に指定する必要があります。 auto 値を使用すると、ブロック要素が自動的に中央に配置されるようにマージンを設定できます。

NOTE

- text-align 属性とその値 center があります。このプロパティは、段落やスパン タグなどの非ブロック要素を中央に配置するために使用されるため、このメソッドでは使用できません。 ＃＃＃例＃＃＃ このプロパティの機能をよりよく理解するために、CSS プロパティ セクションでヘッダーとマージンを auto に設定した div を追加し、それらを 2 つのインライン ブロックと結合して一緒に移動する例を見てみましょう。 div の異なる色は、インライン ブロックなどの異なる表示を示します。

リーリー

上記の出力では、title 要素と div 要素が段落タグとともに回転していることがわかります。

text-align

プロパティを使用して段落タグを中央に配置し、margin プロパティを使用して値が auto に設定されたブロック要素を配置します。

＃＃＃例＃＃＃

次のプログラムでは、画像とその画像の隣にある非ブロック要素を取得します。次に、画像の表示をブロックに設定し、余白を自動に設定してから、タイトルの中央に揃えて、段落の表示プロパティをインライン ブロックに設定します。 リーリー 出力では、希望どおり、画像が中央にあり、テキストが次の行にあることがわかります。

＃＃＃結論は＃＃＃

ブロック要素を中央に揃えることは、バランスのとれた対称的なレイアウトを作成するための優れた方法です。テキスト配置またはマージンの自動値を使用すると、デザイン内の任意の数の要素をすばやく簡単に配置できます。少し練習すれば、これらのテクニックを自信を持って使えるようになります。

以上がブロック要素を中央揃えにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。