垂直方向に整列すると、コンテナ内のインライン ブロック要素が中央に配置されないのはなぜですか?

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

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

Vertical-Align のスコープ

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

例:

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

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

<div>

問題:

この例では、vertical-align: middle を設定しても #wrapper 内の #content 要素が垂直方向に中央揃えになりません。 div.

説明:

Vertical-align は、inline-block 要素をそのコンテナ ブロックに対してではなく、独自のライン ボックス内で位置合わせします。 #content 要素にはテキストのみが含まれており、デフォルトのvertical-align: ベースラインに基づいてすでに垂直方向に中央揃えになっているため、最終的な配置には影響しません。

結論:

インラインブロック要素の垂直方向の配置を使用する場合、要素を含むブロックではなく、要素の行ボックス内のコンテンツが配置されることを理解することが重要です。ページ要素内で望ましい垂直位置を実現するには、この点に留意してください。

以上が垂直方向に整列すると、コンテナ内のインライン ブロック要素が中央に配置されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。