CSS 水平中央揃え_html/css_WEB-ITnose

水平方向の中央揃え: インライン要素のソリューション

中央揃えの要素: テキスト、リンク、その他のインライン要素 (inline または inline-block、inline-table、inline-flex などの inline-* タイプの要素)
ソリューション: div や nav など、block の表示属性を持つ親要素で inline 要素を囲み、親要素の属性 text-align:center 属性を設定します。

HTML

< div >/ div >

< a href ="" >
< "" >リンク要素 02 < a href ="" >リンク要素 03


CSS

nav, div {

text-align: center; }

水平方向の中央揃え: ブロック要素のソリューション

中央揃えの要素: div、p、section およびその他の要素、つまり表示属性が block である要素

解決策: margin-left、margin-right 属性値を auto に追加します (例: margin:0 auto;)

注: 中央に配置する必要があるブロック要素は固定幅である必要があります。そうしないと、幅が 100 を占めるため中央に配置できません。幅の%。

HTML

< div class ="center" >水平方向に中央揃えのブロック要素

CSS

div, p{

width: 200px; /* 要素の幅の値を設定する必要があります*/
color: #fff;

background: #222; margin: 10px auto;

}

水平方向の中央揃え: 複数のブロック要素の解決策

中央揃えの要素: 「複数のブロック要素」を水平方向に中央に配置します
解決策: これらのブロック要素を設定します。表示属性は inline-block です。親要素の text-align 属性は center に設定されます。
注: これらのブロック要素を垂直方向の中央揃えにしたい場合は、前のセクションの margin:0 auto 属性を使用します。

HTML

< div class ="center" >水平方向に中央揃えのブロック要素
CSS

body {

text-align: center;

}

/* ページ美化要素*/

div {
width: 100px;

height: 50px;水平方向かつ中央に配置 (フレックス レイアウトを使用して実装) 解決策: 複数のブロック要素の親要素の表示属性をフレックスに設定し、justify-content:center を設定します。

HTML

< div class ="center" >水平方向中央揃えのブロック要素


CSS

body {
表示: flex;
justify-content: center;

/* ページ美化要素*/
width: 100px;
color: #fff; 222;
マージン: 10px;