CSS はインライン要素とブロックレベル要素の水平方向のセンタリングと垂直方向のセンタリングを設定します_html/css_WEB-ITnose

CSS は、inline 要素の水平方向の中央揃えを設定します

1. div{text-align:center} /*DIV 内のインライン要素は水平方向の中央揃えになります*/

CSS は、

inline の垂直方向の位置を設定しますelements Centering

div{height:30px; line-height:30px} /*DIV 内のインライン要素は垂直方向に中央揃えになります*/

PS: もちろん、水平方向と垂直方向の両方を中央揃えにしたい場合は、次に包括的です

div{text-align:center; height:30px; line-height:30px}

CSS 設定

ブロックレベル要素の水平方向の中央揃え

div p{margin:0 auto ; width: / *DIV 親コンテナは幅を設定します*/

div p{margin:0 aut0; height:30px; line-height:30px} /*ブロックレベルの要素 p で幅を追加することもできます

1. DIV 親コンテナを基準とした幅 水平方向のセンタリング効果*/
注: 将来の実際のプロジェクトでは、ブロック レベル要素の垂直方向のセンタリング レイアウトがこれよりも複雑になる可能性があります。今後の関連記事にご注意ください。

インライン要素とは何ですか?

span、a、label、strong、bなどの一般的なHTMLタグはすべてインライン要素です
デフォルトでは、インライン要素では幅、高さ、上下の余白などを設定できません
Ofもちろん、これは絶対的なものではありません。はい、CSS を通じて任意のインライン要素をブロックレベル要素にできます。例:

span{display:block} /*span はブロックレベル要素に設定されました*/

ブロックレベル要素とは何ですか?

div、p、li、h1、h2、h3、h4 などの一般的な HTML タグはすべてブロック レベルの要素です

もちろん、これは絶対的なものではなく、任意のブロック レベルの要素をCSSによるインライン要素！例:

h1{display:inline} /*h1 はインライン要素に設定されました*/

概要:

フロントエンドの初心者にとって、インライン要素の概念を理解することが重要ですブロックレベルの要素は、div+css レイアウトをカットするのに非常に役立ちます。ご質問がございましたら、以下にメッセージを残してください。