CSS の垂直方向の配置: ニュアンスを理解する
vertical-align プロパティを使用すると、インライン要素を親要素内で垂直方向に配置できます。ただし、基礎となる原則を理解していないと、その動作は予測できない場合があります。
インライン要素と高さ
垂直方向の配置は、インライン要素にのみ影響します。
などの要素<div>はブロックレベルであり、影響を受けません。 など、固有の行の高さを持たないインライン要素の場合、
高さと垂直方向の配置
親要素の高さは静的な値である必要があります。 (つまり、自動またはパーセンテージではありません)。高さが指定されていない場合、ブラウザはコンテンツに基づいて高さを計算するため、予期しない結果が生じる可能性があります。
インライン要素の配置
text-align とは反対これは要素を含むブロックレベルに適用されますが、vertical-align は配置するインライン要素に適用する必要があります。
ブラウザの違い
古いブラウザでは使用できない場合があります。一貫して垂直方向の配置をサポートします。ただし、最新のブラウザは、非インライン要素で使用される場合でも、この機能を適切に処理します。
例: テキストの中央揃え
たとえば、次の HTML があるとします。
<div>
#inner でテキストを垂直方向に中央揃えにするには、vertical-align: middle を #header: に適用します。
#header { display: inline-block; line-height: 1em; margin: 0; vertical-align: middle; }
この例では、#inner がインラインブロックであることに注意してください。高さが固定された要素。
以上がCSS では垂直方向の配置は実際にどのように機能するのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。