🐣
【HTML&CSS】左右中央寄せ ~text-align と margin~
作成日:
2021/07/30
1
text-align: center;
inline要素(ex. img, botton)を中央に配置することができる
※親であるblock要素にtext-align: center; を指定することで、中のinline要素が中央に揃う。
margin: 0 auto;
block要素(ex. div)を中央に配置することができる
※以下のCSSと同一の意味をもつ
margin-top:0;
margin-right:auto;
margin-bottom:0;
margin-left:auto;
※基本的にblock要素は指定がないと親要素の100%の大きさになる。
親要素と同じ大きさであれば
たとえmargin 0 autoを指定していたとしても左右中央寄せにならない。
したがって指定する際はwidthプロパティで横幅を指定する。