複数行にわたるインラインブロック要素で垂直方向の配置が機能しないのはなぜですか?

垂直方向の配置がインラインブロック要素の位置を揃えない: 隠れた理由を明らかにする

垂直方向の配置は、要素を含むブロック内で要素を水平に配置するためによく使用されます。 。ただし、垂直方向の配置は、画像やテーブル要素と同様に、インライン要素とインラインブロック要素にのみ適用されることに注意することが重要です。さらに、text-alignment とは異なり、親要素ではなく子要素に適用する必要があります。

この理解にもかかわらず、一部のユーザーは、inline-block 要素にvertical-align: middle を設定すると、望ましい結果が得られない。これは、垂直方向の配置によって、インライン レベルのコンテンツが含まれるブロックではなく、そのライン ボックス内に配置されるためです。

ライン ボックスは、インライン レベルの要素によって生成されたボックスを含む長方形の領域です。テキストが複数の行に折り返される場合、各行は独自の行ボックスを形成します。したがって、たとえば、テキストの単一行にvertical-alignを適用すると、親要素内での全体的な位置ではなく、その行ボックス内での垂直位置にのみ影響します。

インラインブロック要素の垂直方向の配置を実現するには複数行にまたがる場合は、フレックスボックス、CSS グリッド、親要素の明示的な高さの値など、他のテクニックを使用することを検討してください。

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