vertical-alignとtext-alignは違うのだよ

 vertical-align の使い方がよくわからなかったので調べてみました。text-align と名前が似ているので同じように使えるものだと思っていたのですが、かなり別物だったので忘れないようにまとめておきます。

text-alignみたいには使えない

text-align といえば、要素内のテキストを中央揃えに配置するのによく使います。

20161030_1

これと同じ要領で縦方向に中央揃えにしようとして vertical-align を指定しても効果がありません。

vertical-alignとは

vertical-align はインライン要素とテーブルセル要素のみに適用されるプロパティです。インライン要素とブロック要素による分類は HTML5 で廃止されましたが、このほうが説明が簡単なのでご容赦を。まずはわかりやすいテーブルセル要素からみてみましょう。

テーブルセル要素

ブログに表を作成するときに使われるのがテーブルセルです。このテーブル内部にテキストがあった場合、vertical-align を設定して位置を指定することができます。

20161030_2

インライン要素

vertical-align はインライン要素にしか適用されないとよく説明されますが、インライン要素は高さを指定できないというルールがあるので、高さをもったブロック要素内のテキストが中央に配置されるようなイメージをもつと誤解のもとです。

どちらかというと、同じ行内に並んでいるインライン要素の高さの基準をどのように揃えるのかを指定するプロパティであると考えたほうがよろしい。

例えば、複数のフォントサイズの文章が同じ行内に混在しているような場合、vertical-align を使ってフォントのベースラインをどの位置に調整するのかを指定することができます。

こちらのページがくわしいです。

指定できるプロパティは次のとおりです。

  • baseline
  • top
  • middle
  • bottom
  • text-top
  • text-bottom
  • super
  • sub

このほかに %、em、ex、px などの値で指定することもできます。

20161030_3

画像をお借りしてしまいましたが、詳しく説明されているので一読することをおすすめします。

ブロック要素内のテキストを縦方向で中央にするにはどうしたらよいか

text-align でブロック要素内のテキストを中央に揃える的な設定の仕方について考えます。

テキストが1行の場合

当ブログにも設置していますが、グローバルナビゲーションのようなテキストが一行しかない場合です。

20161030_4

このような場合には、わざわざ vertical-align を使わなくても済みます。height と line-height を同じ値にすればよいだけです。

20161030_5

テキストが複数行の場合

幅や高さを指定しないとテキストの大きさなってしまうので忘れないようにしてください。

20161030_6

画像とテキストを中央で揃える

画像はインライン要素なので、特に設定しなければテキストは隣に並びます。

20161030_7

このテキストを中央に揃える場合にはテキストを div などで囲ってやるとよいです。

20161030_8

画像とテキストの親要素に display:table; を指定する必要がありますが、この方法ならテキストが複数行でも中央に揃えることができて便利です。

20161030_9

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP