「垂直アライグル」プロパティとその典型的なユースケースを説明してください

CSSの垂直アライメントプロパティは、インラインまたはテーブルセル要素を垂直に整列させます。 1.ベースライン、ミドル、スーパー、サブなどの値を使用して、テキスト行内の画像やフォーム入力などの要素を調整します。 2。テーブルセルでは、シミュレートされたテーブルレイアウトでよく使用される上、中央値、または下の値とのコンテンツのアラインメントを制御します。 3.フォーム要素を使用すると、垂直アライインを適用します。中間：中間は、チェックボックスまたはボタンをラベルで整列させ、ブラウザ全体で一貫した外観を得るのに役立ちます。

CSSのvertical-alignプロパティは、要素が互いに垂直に整列する方法を制御します。一般に、テキスト内の画像やテーブル内のセルなど、インラインまたはテーブルセル要素の位置を調整するために使用されます。単純に思えますが、 text-alignの垂直方向のカウンターパートのように振る舞わないため、開発者を混乱させることがよくあります。

インライン要素とのvertical-alignどのように機能するか

vertical-alignの最も一般的な用途の1つは、テキストの行内の画像、アイコン、またはフォーム入力などのインライン要素を整列することです。

• デフォルト値はbaselineで、要素の下部を親テキストのベースラインに合わせます。
• （上付き文字のような）行内で画像を高くする必要がある場合は、 vertical-align: super使用できます。
• 逆に、添え字スタイルのアラインメントの場合、 vertical-align: subうまく機能します。

例えば：

 <p>これは、<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175348653671022.jpeg"  class="lazy"  src = "icon.png" style = "vertical-align：middle;" alt="「垂直アライグル」プロパティとその典型的なユースケースを説明してください" >インライン画像を含むいくつかのテキストです。</p>

vertical-align: middle周囲のテキストと垂直方向に画像を集中させるのに役立ちます。

覚えておいてください： vertical-align 、インラインとテーブルセルの要素のみに影響します。デフォルトでは<div>のようなブロックレベルの要素では何もしません。

テーブルセル内のコンテンツを調整します

テーブルレイアウト（またはテーブルセルとしてスタイルされた要素）を使用すると、 vertical-alignセル内にコンテンツがどのように配置されるかを制御するのに特に役立ちます。

• デフォルトでは、テーブルセル内のコンテンツは上部に整列しています（ vertical-align: top ）。
• セルの内側に垂直に中央に置かれたテキストまたは要素が必要な場合は、 vertical-align: middle使用します。
• 底部のアライメントの場合、 vertical-align: bottomあなたの頼みになります。

これは、CSSを使用してdisplay: tableとdisplay: table-cellを使用してテーブルレイアウトをシミュレートする場合にも適用されます。

例：

 <div style = "display：table; height：100px; width：200px;">
  <div style = "display：table-cell; vertical-align：middle;">
    垂直に中央のコンテンツ
  </div>
</div>

この手法は、多くの場合、古いレイアウトで、またはフレックスボックスまたはグリッドなしで垂直センタリングが必要な応答性コンポーネントを構築する場合に使用されます。

フォーム要素を使用してvertical-align使用します

ラベルやその他のインラインコンテンツの隣に配置すると、 <input> 、 <select> 、 <button>などのフォームコントロールが不整合に見える場合があります。

• vertical-align: middle周囲のテキストやアイコンとより適切に整合するのに役立ちます。
• ブラウザのデフォルトスタイルに応じて、ラインの高さやパディングを調整する必要がある場合があります。

例えば：

 <label>
  <入力型= "チェックボックス" style = "vertical-align：middle;">私をチェックしてください
</label>

これにより、チェックボックスが高すぎるか低く見えるのではなく、ラベルテキストに沿ってきれいに座ることができます。

まとめ

vertical-alignプロパティは有用ですが、しばしば誤解されています。インライン要素とテーブルセルに最適であり、画像とテキストを合わせたり、テーブルセルにコンテンツを中心にしたり、微調整したりするのに最適です。

これは、普遍的な垂直センタリングツールではありません。ブロックレベルのコンテナを完全に垂直にセンタリングするため、代わりにFlexBoxまたはグリッドを使用する必要があります。

しかし、これらの小さなインライン調整の場合、 vertical-align仕事に適したツールです。

以上が「垂直アライグル」プロパティとその典型的なユースケースを説明してくださいの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。