「vertical-align」が Div 内の Inline/Inline-Block 要素を中央揃えにしないのはなぜですか?

インライン/インラインブロック要素の垂直方向の整列

div 内で複数のインライン要素とインラインブロック要素を垂直方向に整列しようとすると、ユーザーは、span 要素がコンテナ内で予想よりも低い位置に留まるという問題に遭遇しました。適用しているにもかかわらず、vertical-align:middle;そして垂直整列:上;

CSS プロパティvertical-align は、テキスト ベースラインに対する要素の垂直位置を制御します。ただし、このプロパティは、親ではなく、位置合わせされる要素に適用されます。 div 内の子要素を垂直方向に揃えるには、代わりに子要素を直接ターゲットにする必要があります。

div > * {
    vertical-align:middle;  // Align children to middle of line
}

この改訂されたコードにより、div 内のすべての子要素が垂直方向の中央に配置されます。 vertical-align は、親 div の高さ全体ではなく、現在のテキスト行を基準にして要素を配置することに注意してください。要素が中央に配置された高さの高い div を作成することが目的の場合は、高さの代わりに line-height プロパティを使用できます。実際の例については、提供されている jsfiddle リンクを参照してください:

[jsfiddle link]

以上が「vertical-align」が Div 内の Inline/Inline-Block 要素を中央揃えにしないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。