オリジナルテキスト：http：//www.mikkolee.com/13
私は最近の垂直アライイン属性を慎重に研究しましたが、その結果は私を驚かせました。この非常に経験豊富なCSS標準は、実際には各ブラウザで異なる機能を遂行します。
ベースラインサブサブトップテキストトップボトムボトム中央値やさまざまな長さの値（％、EM、EXなど）を含む、垂直整列には多くの値があります。私が思う最も誇張された価値の1つをお見せしましょう：底。コードは次のとおりです。
p {
フォントサイズ：18px;
ラインハイト：36px;
フォントファミリー：タホマ、sans-serif;
}
img {
垂直アライイン：ボトム;
}
次に、さまざまなブラウザでのこのCSSの効果を見てみましょう（写真は意図的に作られているため、相対的な位置をはっきりと見ることができます）：
まあ、この結果は実際には非常に信じられないほどです。一般的に、FirefoxはIEよりも正しく説明すると思いますが、Operaを見た後、Safari/WinがFirefoxの側にいる間、IEと同じであることがわかりました。正直に言うと、何が起こっているのかわかりません。
私は「権威あるCSSガイド（第2版）」を慎重に勉強し、W3Cを調べてから、自分で垂直調整についての写真を撮りました。
W3Cによると、インライン要素の垂直アライメントが次のように設定されている場合：ベースライン、トップ、ボトム、要素のベースライン（または中央、上、下部）は、写真の上部や周囲のテキストの上部など、周囲の要素と同じ位置です。テキストトップとテキストボトムが要素のテキストトップ（または下部）である場合、周囲の要素のテキストトップ（またはテキストボトム）が揃っています。長さ（％、em、ex）の場合、ベースラインに基づいて上昇するため、正の数が増加し、負の数が減ります。中央の場合、要素の中心は周囲の要素の中心と整合しています。ここの中心の定義は次のとおりです。写真はもちろん高さの半分であり、テキストはベースライン、つまり小文字xの中心に基づいて0.5Exで移動する必要があります。ただし、多くのブラウザはExの単位を0.5EMとして定義することが多いため、必ずしもXの中心ではありません（例として、Xの高さは10px、EMは18pxであるため、2つの値は異なります）。
ただし、上記のガイドラインによると、各ブラウザの説明が非常に異なることは信じられないことです。私はこれがなぜそうなのかを勉強するのが面倒です。一般に、それらはフォント内の各ラインの位置の異なる定義を持つ必要があるため、この問題は垂直整列だけでなく、インラインテキストとインライン写真の構造に関するブラウザの説明にも関連しています。
最後に、テストページを提供します。各ブラウザごとに垂直アライインのさまざまな値の説明を確認できます。
http://www.mikkolee.com/weblab/001_vertical/
各ブラウザとはまったく異なる中間またはテキストトップなど、他の値をテストできます。経験がある場合は、それについて話し合ってください~~