ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS では垂直方向の配置は実際にどのように機能するのでしょうか?

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

DDD
リリース: 2024-11-07 05:01:02
オリジナル
564 人が閲覧しました

How Does Vertical Alignment Actually Work in CSS?

CSS の垂直方向の配置: ニュアンスを理解する

vertical-align プロパティを使用すると、インライン要素を親要素内で垂直方向に配置できます。ただし、基礎となる原則を理解していないと、その動作は予測できない場合があります。

インライン要素と高さ

垂直方向の配置は、インライン要素にのみ影響します。

などの要素<div>はブロックレベルであり、影響を受けません。 CSS では垂直方向の配置は実際にどのように機能するのでしょうか? など、固有の行の高さを持たないインライン要素の場合、

高さと垂直方向の配置

親要素の高さは静的な値である必要があります。 (つまり、自動またはパーセンテージではありません)。高さが指定されていない場合、ブラウザはコンテンツに基づいて高さを計算するため、予期しない結果が生じる可能性があります。

インライン要素の配置

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート