基本的にCSSで要素を中央に配置したい場合、display:inlineならtext-align、display:blockならmarginを使います。
display:inlineとblock
displayプロパティについては、inline-blockの記事が参考になるかもしれません。
↓
display:inlineの要素をテキストの中に入れても改行されない
↓
display:blockの要素は
改行される
これに対し、改行せずに横に並べることもできる上に、本来inlineにはできないサイズの調整などもできるようになったフレキシブルな状態がinline-blockです。
それぞれ、CSSでdisplayプロパティにinline、block、inline-blockを指定すれば変更できます。
display:inline;
display:block;
display:inline-block;
ここからが本題です。
text-alignの使い方
inline、inline-blockの要素を中央に寄せて表示するには、CSSのtext-alignプロパティをcenterにセットします。leftで左寄せ、rightで右寄せにすることもできます。
text-align:center;
ちょっと使い方に癖があります。
中央に寄せたい文章</span>
↓
中央に寄せたい文章</div>
↓
中央に寄せたい文章
display:blockのpにtext-alignが効くのはなぜか
という疑問を感じたのですが、これは「pの中にある要素」だけが中央に移動していて、pタグそのものは別に移動してないんだそうです。
わかりやすいようにpタグにborderを引いて、text-alignをかけてみます。
<！-- html -->
<p class = "ctr">中央に寄せる文章</p>/*CSS*/
.ctr{
border:1px solid black;
text-align:center;
}中央に寄せる文章
するとこういうことになり、なるほどpタグは横いっぱいに広がって微動だにしていないことがわかります。
text-alignでblockの要素を中央に寄せることはできない
text-alignは、display:blockの要素に対して指定して、その内部のdisplay:inlineの要素の配置を決定することができるプロパティと定義されています。
ではdisplay:blockの要素を中央に配置したい場合はどうするかというと、marginを使用します。
margin:値;
marginやpaddingに値をふたつ指定すると、上下、左右の意味になります。左右の値にautoを使用すると、親要素と自分の間の余白を左右均等にmarginが埋めるため、親要素の左右から見てまんなかにdisplay:blockの要素が配置されます。
(縦軸にautoは使えない)
（余白がないため。autoだと0と同じになる）
（図はmargin:10px指定）
以上、要素を左右から見てまんなかに配置する代表的なやり方ふたつでした。
コメント