「vertical-align」プロパティはインライン要素をどのように配置しますか?

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

垂直方向の配置を操作する場合、「vertical-align」プロパティの背後にある原則を理解することが重要です。このプロパティは、インライン要素を周囲のテキストまたは要素に対して垂直方向にどのように配置するかを指定します。

インライン要素の要件

「vertical-align」プロパティはのみ適用できます。要素 (span、img、a など) をインライン化します。インライン要素はテキスト フロー内で自然に流れます。

行の高さに関する考慮事項

画像やアイコンなど、通常は行の高さが指定されていない要素の場合、適切な垂直方向の配置を有効にするには、行の高さを設定する必要があります。

高さの値要件

「vertical-align」が適用される要素の高さは、一貫した垂直方向の配置を確保するために静的な値 (パーセントや自動ではない) である必要があります。

包含要素とターゲット要素

「vertical-align」プロパティは、包含要素とターゲット要素の両方に適用できます。影響を与える対象の要素。ただし、コンテナ内のすべてのインライン要素に影響するため、コンテナ要素に適用することをお勧めします。

ライン ボックスについて

「vertical-align」プロパティは、要素の垂直方向の中心と周囲のテキストの行ボックス。ラインボックスは、コンテナの高さ全体ではなく、1 行のテキストを囲みます。

JsFiddle のデモ

提供されている JsFiddle の例は、垂直方向の配置の原理を示しています。外側のコンテナは高さ 200 ピクセルに設定され、内側の要素は inline-block に設定され、同じく高さ 200 ピクセルに設定されます。内部要素内のヘッダーは「vertical-align: middle;」に設定されています。

期待される結果は、ヘッダーが内部要素内で垂直方向の中央に配置されることです。ただし、ヘッダーには複数行のテキストが含まれているため、垂直方向の配置は高さ全体ではなく、個々の行ボックスに適用されます。その結果、ヘッダーはコンテナー内で部分的にのみ整列されます。

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