行中に画像などが入った場合,テキストの流れとその位置関係を問題にしたい場合がある。また,上付きのような文字が一直線に並ばないような配置もあるだろう。
水平配置を text-align 属性によって指定するのに対して,垂直配置は vertical-align 属性で指定する。この属性はインライン要素に適用され,継承されない。
vertical-align: (キーワード または パーセンテージ);
値をキーワードとする場合には,候補として次のものがある。
ベースラインとは右の図に示すように欧文を配置するときの基準になるものである。和文にはベースラインはないが,欧文と混在した場合,和文文字の最下部が欧文文字の最下部に合わせられる場合と,ベースラインに合わせられる場合がある。
値が top,bottom のときに関してはその要素の中だけで整形が行われるのに対し,それ以外では,その外側の要素と比較して整形されるという点に注意しよう。
パーセンテージで指定するときは,100% とするのはその要素の line-height である。指定された分だけ,その要素のベースラインをその外側のベースラインに対して持ち上げる。50% を指定すればベースライン上方向に 0.5 行分持ち上がるであろう。負の値も許され,-100% では 1 行分ベースラインが下げられて整形されることになる。ベースラインがない場合は,“いちばん下”と読み替える。
<P>ベースライン(最下部)を <SPAN STYLE="vertical-align: 50%;">0.5 行分持ち上げます</SPAN>。文字を大きくして<BIG STYLE="vertical-align: middle;">真ん中をそろえて</BIG>整形します。</P>
ベースライン(最下部)を 0.5 行分持ち上げます。文字を大きくして真ん中をそろえて整形します。
IE4/5 super,sub のみがサポートされている。
IE3, NN4 vertical-align 属性はサポートされていない。
line-height 属性は“行送り(行の高さ)”を指定すると述べたが,厳密には正しくない。行送りは,line-height,vertical-align,そして要素の大きさを加味して作られるラインボックスによって決められる。
たとえば,14pt の font-size に対して line-height を 18pt としたならば,上下に 2pt ずつが“行間”として割り振られる。ところが,その行に 18pt 以上の高さの画像が入っていると行どうしが重なってしまうかというと,そうではない。これは,ラインボックスの高さが line-height で指定されたものより大きいからである。
ラインボックスの高さは,次のようにして決められる。
もし,背の高い画像が含まれていたら,そのボックスの大きさに応じてラインボックスの高さが大きくなることがある。
また,行中で vertical-align がさまざまに指定されたときもラインボックスは高くなりうる。たとえば,行の一部に vertical-align を -100% とする指定があった場合,ラインボックスは line-height の倍になるだろう。
line-height を長さまたはパーセンテージで指定して,font-size を大きくすると,line-height はそのままの値が継承されるから,font-size のほうが line-height より大きくなることもある。その結果,思いがけず行が重なる場合がある。line-height が倍率で指定されていれば,継承されるのは倍率そのもなので,font-size に応じて変わりうるから,1.0 以上を指定していれば重なることはない。
NN4 ひとたび line-height が指定されると,その要素では画像などのボックスによってラインボックスの高さは書き換えられない。したがって,line-height 属性を指定した要素に背の高い画像を貼り込むと,画像とテキストが重なる。