仕様書

特性値

[8] vertical-align は、 baseline-source, alignment-baseline, baseline-shift のshorthandです。 >>7

[9] ただし指定できる値には制限があります。 baseline-source の auto は vertical-align には使えません。 >>7

[10] vertical-align は古くからあり、 longhand は後に SVG で導入されたものでした。 その歴史的経緯もあって、 vertical-align の方がよく使われ、十分に実装されていました。

[13] 仕様書は、 longhand を個別に cascade する必要がある場合や、 異物の SVG 実装との互換性が必要な場合を除き、 shorthand の vertical-align を使うべきとしています。 >>7

[11] 現在でも Chrome の実装は仕様通りでなく複数の値が指定できないなど制限があるようです。 (longhand の個別の指定はできても、 shorthand で指定できないことがあります。)

[14] 文字列座標系

表

[12] 表のこまにおける縦配置にも影響します。 >>7

歴史

HTML

valign

CSS

[1] Bug 1652 - <sup>(vertical-align:super)の位置が上過ぎる http://bugzilla.mozilla.gr.jp/show_bug.cgi?id=1652 (名無しさん 2005-11-26 02:27:19 +00:00)

[2] -webkit-baseline-middle (名無しさん [sage])

[3] vertical-align の算出値 https://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20vertical-align%3A%2024.5%25%3B%0D%0A%7D%0D%0A;h=%3Cinput%20type%3Dbutton%20onclick%3D%22%0D%0A%20%20var%20el%20%3D%20document.getElementsByTagName%20('p')%5B0%5D%3B%0D%0A%20%20var%20sd%20%3D%20getComputedStyle%20(el%2C%20null)%3B%0D%0A%20%20w%20(sd.verticalAlign)%3B%0D%0A%22%20value%3DgetComputedStyle%3E%0D%0A%3Cinput%20type%3Dbutton%20onclick%3D%22%0D%0A%20%20var%20el%20%3D%20document.getElementsByTagName%20('p')%5B0%5D%3B%0D%0A%20%20var%20sd%20%3D%20el.currentStyle%3B%0D%0A%20%20w%20(sd.verticalAlign)%3B%0D%0A%22%20value%3DcurrentStyle%3E%0D%0A%3Cp%3Exxx;p=n;x=style-element

[4] >>3 Opera 9 では、 鍵語が指定されたら算出値 (鍵語) を返します。 <length> や <percentage> が指定されると、 getComputedStyle では算出値 (px) を、 currentStyle では指定値 (ただし単位は常になぜか px のまま) を返すようです (どちらも整数に切り捨て)。

WinIE 6 は指定値を返します。

Firefox 2 では、 鍵語が指定されたら算出値 (鍵語) を返します。 <length> が指定されたら算出値 (px) を返します。 <percentage> が指定されたら指定値を返します。

[5] WinIE 6 は auto という値を認識します。 初期値はそれのようです。

Firefox 2 と Opera 9 は宣言ごと無視します。

[6] vertical-align の百分率値は同じ要素の line-height に対するものと定義されています。 line-height の算出値は鍵語 normal だったり <number> だったりするので、直接絶対長に変換できません。 (一応どちらの使用値もレンダリングせずに決定できますが・・・。) なので、百分率値を絶対長に変換せずに算出値にしてしまう Firefox のような実装はそれなりに筋は通っています。 (名無しさん)