インライン ブロック要素の垂直方向の配置について理解する

ドキュメントでは、インライン ブロック要素に対して垂直方向の配置が機能することが示されていますが、次の場合には混乱を招く可能性があります。期待どおりに調整できません。明確にするために、概念をさらに深く掘り下げてみましょう。

Vertical-Align のスコープ

親要素のコンテンツ領域内でテキストの配置を調整する text-align とは異なり、vertical-Align はalign は要素の行ボックス内で動作します。ライン ボックスは、単一行のインライン レベル要素によって生成されるボックスを囲む長方形の領域です。

例:

次のコードを考えてみましょう。

#wrapper {
  border: 1px solid black;
  width: 500px;
  height: 500px;
}
#content {
  border: 1px solid black;
  display: inline-block;
  vertical-align: middle;
}

問題:
この例では、vertical-align: middle を設定しても、#content 要素が垂直方向の中央に配置されません。 #wrapper div.
説明:
Vertical-align は、 inline-block 要素は、そのコンテナ ブロックに対して相対的ですが、独自のライン ボックス内にあります。 #content 要素にはテキストのみが含まれており、デフォルトのvertical-align: ベースラインに基づいてすでに垂直方向に中央揃えになっているため、最終的な配置には影響しません。
結論:
 
インライン ブロック要素の垂直方向の配置を使用する場合、要素を含むブロックではなく、要素の行ボックス内のコンテンツが配置されることを理解することが重要です。ページ要素内で望ましい垂直位置を実現するには、この点に留意してください。