同じ線を共有する 2 つのインライン要素があり、大きいほうvertical-align: baselineが小さいほうが小さいvertical-align: middle場合、中央に配置された要素がベースライン要素の下に表示されるのはなぜですか?
私が話していることを示すデモをまとめました: http://jsfiddle.net/mLSG2/
小さい要素の中間線が大きい要素のベースラインに揃えられているように見えますが、それは私にはあまり意味がないようです. これが本当なら、その背後にある合理的な理由は何ですか?
より一般的には、さまざまな行の高さとさまざまな垂直方向の配置宣言の要素が同じ行を共有している場合に、配置がどのように計算されるかを誰かが説明できますか? これを定義する仕様の場所はありますか?
仕様では、vertical-align: middle「ボックスの垂直方向の中点を、親ボックスのベースラインに親ボックスの x 高さの半分を加えたものに揃える」必要があります。この場合、斜体テキストの行ボックスの垂直方向の中央は、要素のベースラインにそのdiv要素の x 高さの半分を加えたものに揃える必要があります。これにより、実際にはそのベースラインにかなり近づきます。
ここではフォントが設定されていないため、ブラウザは通常、16px などのデフォルトのフォント サイズを使用します。x-height はフォントによって異なりますが、大まかな平均を仮定しましょう: フォント サイズの半分、8px です。その半分で 4px になり、差はかなり小さくなります。(要素のフォント サイズは、divより大きなフォント サイズの内部要素の存在によって変更されません。)
状況は、ブラウザーのバグによってわかりにくくなっている可能性があります。プロパティにはバグのvertical-alignある歴史があります。多くの場合、相対位置を使用する方が適切です。