CSS でテキストの縦揃えを上揃え, 中央揃え, 下揃えにする方法

phi phi on css

久々の備忘録!!

CSS でテキストの縦揃えを変えるときによく使う方法を紹介します.

text-vertical-align

Runstant Demo

まずは実際に実行してみて下さい. 上, 中央, 下揃えそれぞれ適応させたサンプルです.

上揃えにする方法

上揃えはデフォルトですね. 何もしなくても上揃えになります. 今回のサンプルでは他の CSS に合わせるためにあえて 下記のようなコードを追加しています.

#box1 span {
  position: absolute;
  top: 0;
}

中央揃えにする方法

まずは中央揃えにしたいテキストの親要素に position: relative; を適応します.

.box {
  float: left;
  position: relative;
  margin: 10px;
  width: 25%;
  height: 90%;
  border: 1px solid black;
  background-color: white;
  font-size: 2rem;
  line-height: 2rem;
}

そして中央揃えにしたいテキストの position プロパティに absolute を設定します.

親要素の position プロパティが relative にすることで, 子供の要素の position プロパティを absolute にした際の 開始位置を親要素の左上にすることができます.

そしてテキスト top プロパティを 50% にし, 自分自身のテキストの大きさ/2(1rem)分だけ margin プロパティでズラす ことで縦揃えを中央揃えにすることができます.

#box2 a {
  position: absolute;
  top: 50%;
  margin-top: -1.0rem;
}

下揃えにする方法

下揃えは中央揃え同様親要素の position プロパティに relative テキストの position プロパティに absolute を設定します. そして bottom プロパティを 0 にすることでボックスの底辺にひっつけて下揃えにすることができます.

#box3 a {
  position: absolute;
  bottom: 0;
}

ついでに横揃えも

ついでに横揃えの設定方法についても紹介しておきます. 横揃えは簡単ですね.

text-align にそれぞれ left, center, right を指定するだけです.
http://goo.gl/R1iMXW

以上, 備忘録でした.