文字などをCSSで上下・左右に寄せる方法

CSS で文字をtext-align:center;やvertical-align:middle;で寄せてみたけれど、中央に寄らなかったことはありませんか？

今回は、CSS で文字などを上下・左右に寄せる方法を紹介します。

上下左右の移り変わりがわかりやすくなるように、HTML と CSS でモデルを作りました。

上下左右の移り変わりがわかりやすくなるように、HTML と CSS でモデルを作りました。

今のところ、内枠、文字どちらも左上に寄っています。 これらを、様々な方法で上下・左右に寄せていきます。

1.左右中央に寄せる

1-1.文字を左右中央に寄せる

文字を中央に寄せる場合は、文字または文字の親になる要素にtext-align:center;を指定します。

1-2.画像を左右中央に寄せる

画像を中央に寄せる場合は、画像の親になる要素にtext-align:center;を指定します。

注意していただきたいのは、img にtext-align:center;を指定しても、画像に関しては中央に寄りません。

1-3.内側を左右中央に寄せる　その 1

これまで、文字や画像を左右中央に寄せました。 この調子で、内枠を左右中央に寄せたい場合、外枠にtext-align:center;を指定しても、内枠は中央に寄りません。

なぜならば CSS では、display:block;の要素に対して、text-alignが適応されないのです。 では、どうすればよろしいでしょうか？

内側を左右中央に寄せる場合は、margin-left: auto; margin-right: auto;を指定します。

この際、注意していただきたいのですが、width の指定が必要です。 width を指定しないと、画面一杯まで広がってしまいます。

1-3.内側を左右中央に寄せる　その 2

また、親になる要素にtext-align:center;、子になる要素にdisplay: inline-block;を指定する方法もあります。

ご覧の通り、さらに孫の要素も中央寄りになっております。

2.上下中央に寄せる

上下中央に寄せる場合は、親になる要素に position: relative;、子になる要素にposition: absolute; top: 50%; transform: translateY(-50%); -webkit- transform: translateY(-50%);を指定します。

3.上下左右中央に寄せる

3-1.position: relatibe;を使う

上下左右中央に寄せるには、上下中央に寄せたスタイルから、left: 50%; transform と-webkit- transform に X 座標も加えます。

3-2.display: flex;を使う

別の方法として、親になる要素にdisplay: flex; align-items: center; justify-content: center;を指定する方法もあります。

こちらの方が簡単なのですが、IE9 以下はdisplay: flex;が対応していないのでご注意ください。

わからなくなったら、時々見直してみてください。