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

2013 年 4 月 21 日

Contents

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

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

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

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

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

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

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

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

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

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

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

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

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

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

参考サイト：MDN

Posted by takasho