※プログラミング初心者です

要素を中央に並べたいとき、
text-align: center;
margin: 0 auto;
display: inline-block;
などがありますがどういうときにこれらを使うのかが分からず、
上から順に書いていき、効いたものを使うなどしています。
どのように使い分けをしたらいいのでしょうか。
そしてこのセレクタにはこのCSS、と判断するようにするためにはどうしたらいいのでしょうか。

行動規範の内容に同意します

回答2件

HTML要素の属性によります。

上から順に書いていき、効いたものを使う

それをした上で、効いてないものを削除すれば
どういう場合に何が効くか徐々にわかるようになると思います

sample

block要素をセンタリングするには、自分自身のmarginをautoにする

中身はtext-alignでcenter;

css
1<div>
2<div style="background-Color:lime;width:50%;margin:auto;text-align:center;">test</div>
3</div>

inline-block要素をセンタリングするには、親要素のtext-alignをcenter

中身はtext-alignでcenter;

css
1<div style="text-align:center">
2<div style="background-Color:aqua;width:50%;display:inline-block;">test</div>
3</div>

投稿2021/08/06 04:01

編集2021/08/06 04:11

yambejp

総合スコア116835

MikiMasuda

2021/08/06 04:02

インライン要素か、ブロック要素かで判断するということですか？

yambejp

2021/08/06 04:12 編集

sampleつけておきました、知識として覚える必要はありますが慣れなので何パターンかご自身でテストすることです

MikiMasuda

2021/08/06 04:12

ありがとうございます。

行動規範の内容に同意します

私見ですが

初めに結論を書いておきますが、個人的には、要素を縦並びでセンタリングするのであれば全て

css
1display: block;
2width: xx;
3margin: 0 auto;

としておくのが一番無難なのではないかな、と思います。

text-align: center について

text-alignは要素内にあるインラインレイアウトに関する指定です。
ですので、ブロックレイアウトなどにあるものには影響しません。
つまり、センタリンクしたい要素が以下のようなものである時に、text-align: centerをその親要素に指定することが必要です。

文字
一部のフォーム部品など、display: inline-blockとなっている要素で、displayが指定されていないもの
a など、display: inlineとなっている要素で、displayが指定されていないもの
img や iframe などの置換要素で、displayが指定されていないもの
css でdisplayが inline-block,inline-tableなどに指定されている要素

個人的にはインライン要素のセンタリングにtext-align: centerを使うのはいかがなものかなあ、と思っています。テキスト、またはせいぜい置換要素に限った方がいいのでは。

margin: 0 auto について

margin: 0 autoはその要素の水平方向の余白を左右等しくするものです。
ただし、marginのauto値は、レイアウトと浮動(float)と配置(position)によって解釈が異なります。
詳細はこちらの表をご覧ください。

値 | margin-left - CSS: カスケーディングスタイルシート | MDN

極めて大雑把に言うと、display:blockの中にある float:none,position:staticまたはrelativeの要素じゃないと思った通りにセンタリングしないことが多いです。

また、余白の均等分配によってセンタリングをするため、余白の余地がない場合はセンタリングしません。
borderとpaddingとwidthの合計値が親要素を超えている場合、余白の余地がないので、センタリングしようと右寄せしようと結果は変わりません。
widthの初期値はautoですが、これは通常のフローですとwidth: 100%と解釈されますので、それだけで余白の余地がなくなります。
つまり、widthに何の指定もしていない場合はセンタリングが効かないと思っていいです。