インラインブロック要素で垂直方向の配置が期待どおりに機能しないのはなぜですか?

インライン ブロック要素の垂直方向の配置の問題

垂直方向の配置は、通常、インライン要素、インライン ブロック、画像、テーブルのスタイル設定に起因します。要素。ただし、インライン ブロック要素に適用すると、垂直方向の配置が望ましい結果を生成できないことがよくあります。その理由を理解するには、垂直方向の配置の仕組みを詳しく調べる必要があります。

垂直方向の配置は、親要素を基準としたライン ボックス内のコンテンツの位置に影響します。ライン ボックスは、すべてのインライン レベルの要素を 1 行で囲む長方形の領域を指します。この例では:

#wrapper {
  border: 1px solid black;
  width: 500px;
  height: 500px;
}

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

インライン ブロック要素 '#content' には幅と高さの両方があり、独自の行ボックスを作成します。垂直方向の配置はこのライン ボックス内で機能し、親要素 '#wrapper' ではなく、その中で要素を垂直方向に配置します。

したがって、垂直方向の配置がインライン ブロック要素に適用されると、要素は次のように配置されます。その結果、親要素内で垂直方向の位置合わせが欠けているように見えます。

以上がインラインブロック要素で垂直方向の配置が期待どおりに機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。