CSS の vertical-align プロパティとベースラインの問題に関する深い理解

vertical-align属性は、主にインライン要素の配置を変更するために使用されます。インラインレイアウトに大きな影響を与えます。これを理解していないと、スタイルの開発や調整時に間違いを犯しやすくなります。

このプロパティの原理はインターネット上では非常に複雑で、一見すると難しそうに見えます。その原理を完全に理解する必要はありません。ルールさえ理解していれば、それを使用することができます。ここで私の理解を共有します。

ベースライン

vertical-align屬を理解するには、ベースラインを理解する必要があります。ベースラインをどのように理解すればよいでしょうか?

1. Web ページは長方形のディスプレイ画面上に作成され、多くの場合、行ごとにレイアウトされます。必然的に、1 行に複数のコンテンツが含まれることになりますが、この行のコンテンツを上下に揃えるにはどうすればよいでしょうか。答えは、デフォルトでベースラインを揃えることです。

2. さまざまなフォント、画像、インライン HTML 要素、その他の表示可能なコンテンツには、それぞれ独自のベースラインがあります。特定のコンテンツのベースラインを知るには、小文字の「x」という簡単な参照を見つけることができます。なぜそれを見つけるのでしょうか?英語の文字のベースラインが小文字の「x」の下部にあるため、見やすくなります。

上記の 2 つのポイントを知っておくと、他のコンテンツ要素のベースラインの位置を簡単に判断できます。他の要素と小文字の「x」を 1 行に配置すると、一目でわかります。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>ドキュメント</title>
  <スタイル>
    div {
      境界線: 1px 実線シアン;
      フォントサイズ: 30px;
    }
    div.span1{
      表示: インラインブロック;
      背景色: 緑;
    }
    div.span2{
      表示: インラインブロック;
      オーバーフロー: 非表示;
      背景色: 緑;
    }
  </スタイル>
</head>
<本文>
  <div>
    x
    <img src="./demo.jpg" alt="">
    中国語の文字 <input type="text">
    <button>ボタン</button>
    <span class="span1">span1</span>
    <span class="span2">span2</span>
  </div>
</本文>
</html>

上図に示すように、この行の要素のベースラインは赤です。画像とoverflow:hiddenスタイルの要素のベースラインの位置は下部にあり、中国語、入力ボックス、 buttonのベースラインの位置はすべて下中央の位置にあることがわかります。これらのインライン要素の配置は、まずベースラインを上下に揃え、次に親要素を展開することがわかります。

注目すべき点の 1 つは、画像を div に直接配置すると、画像の下部と div の下部の間に隙間ができることです。これは、インライン要素のベースラインを揃えた後、親要素のフォントベースラインと一致している必要があるためです。言い換えると、各インライン要素のベースラインは、親要素のフォントベースラインと揃っている必要があります。ただし、親要素の行の高さとフォントサイズのスタイルが変更されると、親要素のフォントベースラインの位置が変更され、行内の要素の位置が全体的に上下に移動します。画像のみが表示され、テキストは表示されませんが、親要素にはデフォルトのline-heightとfont-sizeがあり、レイアウトに静かに影響します。下の図に示すように、小文字の「x」が div に配置され、その下部が隙間を占めていることがわかります。したがって、この理由を理解した上で、このギャップを削除したい場合は、親要素のline-heightとfont-size 0 に設定するか、画像をブロックレベル要素に設定して、画像が 1 行だけを占めるようにするだけです。同様に、div 内に入力ボックスを直接配置すると、入力ボックスの上に隙間ができます。これに似ていますが、画像と入力ボックスのベースラインの位置が異なります。

vertical-align プロパティ

上記のインライン要素の並べ替えの原則を理解した後、次のような疑問が生じるかもしれません。一部のインライン要素をベースラインに従って配置したくない場合はどうすればよいでしょうか。答えは、 vertical-alignプロパティを使用することです。

まず、 vertical-align プロパティはインライン要素にのみ有効です。これは、現在のインライン要素と親要素のフォントの配置を変更します。デフォルト値はbaselineです。つまり、上でテストしたように、2 つのベースラインが揃っています。

属性値の詳細については、https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align を参照してください。検証のために属性を切り替えるには、div に小文字の「x」と画像を追加するだけです。

簡単に説明すると、次の 2 つのプロパティがあります。

1. 属性が「%」に設定されている場合、現在のインライン要素の line-height 属性値の比率を参照します。正または負の値に設定できます。インライン要素のベースラインは、親要素のフォントベースラインに対してこのパーセンテージだけ上または下に移動します。以下に示すように、画像をvertical-align: 50%; line-height: 30px設定します。画像の下部は「x」の下部と揃うはずですが、現在は 15px 上方に移動しています。-50% の場合は、15px 下方に移動します。もちろん、 length，vertical-align：15px;と直接設定しても効果は同じです。

2. 属性が「middle」に設定されている場合、インライン要素の中央の位置は、親要素のフォントベースラインの上の 1/2「x-height」の位置に揃えられます。「x-height」は、実際には親要素の小文字「x」の高さです。簡単に言えば、インライン要素の中央の位置は、親要素の小文字「x」の中央の位置 (x の交点) に揃えられ、2 つの中央を揃えることと同じです。

要約する

CSS の vertical-align プロパティとベースラインの問題に関する詳細な理解に関するこの記事はこれで終わりです。CSS の vertical-align プロパティとベースラインに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

<<: Windows の MySQL net start mysql MySQL サービスの起動エラーが発生するシステムエラーの解決

>>: HTML+CSS+jQuery はスクリーンショットで検索ホットリストタブ効果を模倣します