[CSS] text-align・vertical-alignプロパティの特徴

2013 年 4 月 21 日 Categories: CSS |

text-align

特定の要素の子孫にあるテキストやインライン要素を横方向(水平方向)のどの位置にするか指定。

このプロパティは継承されるので、設定を変えたい場合は子孫の要素のどこかで再設定する必要がある。

なお、デフォルト値は通常は「left」(左寄せ)だが、表示するページの言語によって初期値が異なるので注意。

たとえば、アラビア語では「right」になる。

vertical-align

インライン要素そのものを一行の中で縦方向(垂直方向)のどの位置にするか指定。

text-alignとは異なり、ブロック要素に指定してその内容の位置を決めるものではない。

あくまで、ひとつひとつのインライン要素に対して指定する。

継承しないので、子孫の各要素で「vertical-align: inherit;」を指定する必要がある。

テーブルセルの場合

ただし、HTMLのtd要素、CSSの「display: table-cell;」が適用された要素では、その内容に対して効果が出る

vertical-alignは、インライン要素に指定した場合とテーブルセルに指定した場合とでは、意味合いが異なるということ。

各値
baseline

対象のテーブルセルのベースラインを、ベースライン上にそろえられた列(tr、table-row)の中にある他のすべてのベースラインとそろえる。

top

対象のテーブルセルにおける上部のパディングの端を、列の上部とそろえる。

middle

テーブルセルのパディングされた矩形(領域)を、列の内部でセンタリングする。

bottom

対象のテーブルセルにおける下部のパディングの端を、列の下部とそろえる。

参考サイト:MDN