CSSで要素を左寄せ・中央寄せ・右寄せする方法

CSSにおいて、標準では左寄せや左揃いが適用されています。しかし、デザインに合わせて要素を中央寄せや右寄せにしたいことがあると思います。

そこで、今回はCSSで要素を左寄せ・中央寄せ・右寄せする方法を紹介します。

要素を左寄せ・中央寄せ・右寄せする方法

ブロック要素内で位置を指定する場合

ブロック要素内で位置を指定したい場合は、text-alignを使用します。

左寄せ

中央寄せ

右寄せ

要素を左右に配置する場合

要素に左右の配置の指定をするには、floatを使います。しかし、floatには中央配置がないので左右のどちらかに寄せたい場合のみに使用します。

floatは使える範囲が広いので、覚えておくと便利ですが、clearを使ってfloatの解除しないとレイアウトが崩れてしまう場合もあります。レイアウトへの影響を確認しながら、使用していきましょう。

右寄せ

左寄せ

要素を中央に配置する場合

floatでは中央に要素を配置できないので、中央に要素を配置したい場合は、margin: auto;を左右に設定することで中央に配置できます。

ただ、marginを使用する場合は、横幅を指定していないと左右のmarginが適用されないので横幅を必ず設定してください。