インライン要素では垂直方向の配置が異なる動作をするのはなぜですか?

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

CSS での垂直方向の配置は、特定の条件と例外のため、インライン要素を操作するときに課題となります。

垂直配置の適用

垂直配置はインラインに適用されます指定された高さを持つインラインまたはブロックコンテナー内の要素。高さを静的な値 (auto や % ではない) に設定することをお勧めします。

インライン要素内の配置

インライン要素内では、vertical-align によって要素の配置が調整されます。要素のテキストまたはコンテンツを垂直方向に配置します。これは、ブロック要素内でテキストを水平に配置する text-align とは異なります。

JSFiddle の例

提供された JSFiddle では、#header は # の間の垂直方向の中央に配置される必要があります。外側と#内側。ただし、#header は #inner の先頭に配置されます。これは、#inner はインライン要素ですが、#header はインライン要素ではないためです。

Line-Box Alignment

Vertical-align は、ライン ボックスに基づいて要素を配置します。これらのボックスは、テキストまたはコンテンツの個々の行に基づいて作成されます。したがって、複数の行がある場合、vertical-align はそれぞれの行ボックスで整列し、要素の整列がコンテナの高さ全体にわたって一貫していないという予期しない結果が生じます。

追加の考慮事項

• 最新のブラウザは、自然にインラインではない要素の垂直方向の配置を正しく処理します。
• 垂直方向に揃えたい要素をインライン要素でラップする必要がある場合があります。
• 通常は行の高さを持たない要素に行の高さを追加することを検討してください。
• コンテナの高さ全体内で要素を垂直方向の中央に配置したい場合は、フレックスボックスやテーブル。

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