「vertical-align」プロパティはインライン要素とラインボックスでどのように機能しますか?

Vertical-Align プロパティを理解する

vertical-align プロパティは複雑に見える場合があり、開発者はその有効性について不確かなままになります。その機能を明確にするには、その複雑さを掘り下げることが不可欠です。

インライン要素は、vertical-align のアプリケーションの基盤として機能します。ただし、ヘッダー (

、

など) など、固有の行の高さを欠いている要素には、明示的な行の高さの指定が必要です。さらに、包含要素の高さプロパティは、パーセント値や自動に依存せず、静的な値を持つ必要があります。

さらに、vertical-align は、包含要素ではなく、垂直方向の配置を目的とした特定の要素に適用されます。

提供された jsfiddle の例では、位置合わせが一貫していないように見える理由を確認できます。垂直方向の整列は、コンテナ全体 (#outer) ではなく、個々の行 (ラインボックス) に対して要素を整列させることによって機能します。

これを説明するために、例にさらにテキストを挿入してみましょう。

[テキスト コンテンツが増加した追加のコード スニペット]

これで、#header がそれぞれの行ボックス内で正しく配置されていることがわかります。これは、短いテキスト行が 1 行しかない場合に位置がずれて見える理由を説明しています。

以上が「vertical-align」プロパティはインライン要素とラインボックスでどのように機能しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。