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

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

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

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

image2

<head>
  <style>
    .outside {
      width: 50%;
      height: 30%;
      background-color: #d9863d;
      border: 2px solid #040d0c;
    }
    .inside {
      width: 50%;
      height: 50%;
      background-color: #f2f0e4;
      border: 2px solid #040d0c;
    }
    .paragraph img {
    }
    .paragraph {
    }
  </style>
</head>
<body>
  <div class="outside">
    <div class="inside">
      <img src="weather.png" />
      <div class="paragraph">晴れ時々曇り</div>
    </div>
  </div>
</body>

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

1.左右中央に寄せる

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

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

.paragraph {
  text-align: center;
}

image3

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

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

.inside {
  text-align: center;
}

image4

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

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

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

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

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

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

.inside { width: 50%; margin-left: auto; margin-right: auto; }

image5

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

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

.outside {
  text-align: center;
}
.inside {
  display: inline-block;
}

image6

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

2.上下中央に寄せる

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

.outside {
  position: relative;
}
.inside {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit- transform: translateY(-50%);
}

image7

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

3-1.position: relatibe;を使う

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

.outside {
  position: relative;
}
.inside {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

image8

3-2.display: flex;を使う

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

.outside {
  display: flex;
  align-items: center;
  justify-content: center;
}

image9

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

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

ブログ一覧