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

HTML の垂直方向の配置: 制限について理解する

要素を垂直方向に配置するための貴重なツールである垂直方向の配置は、特定の HTML 要素に制限されています。インライン、インラインブロック、イメージ、テーブル。 text-align とは対照的に、垂直方向の配置は親ではなく子要素に適用する必要があります。

これらのガイドラインにもかかわらず、一部の開発者は、vertical-align:middle を inline-block 要素に適用しようとすると問題に遭遇します。その理由を理解するには、ライン ボックスの概念を詳しく掘り下げる必要があります。

ライン ボックスと垂直方向の配置

垂直方向の配置は、要素を含むブロック内ではなく、ブロック内の要素を配置します。彼らのラインボックス。ライン ボックスは、要素のインライン レベルのコンテンツを囲む長方形の領域です。

たとえば、複数行の段落内のテキストの各行は、ライン ボックスを構成します。これが、

のようなインライン コンテンツに対して垂直方向の配置が完璧に機能する理由です。タグ。

例:

この例では、指定されたタグのおかげで、テキストの各行が行ボックス内で垂直に配置されます。 line-height.

結論

それを含むブロック内で水平に配置されるインライン ブロック要素には、インライン コンテンツの垂直方向の配置機能がありません。垂直方向の配置を実現するには、別の方法に頼るか、インラインブロックをブロックレベルの要素に変換することを検討する必要があります。

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