CSS では垂直方向の配置は実際にどのように機能するのでしょうか?

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 サイトの他の関連記事を参照してください。