logo

TechCodeview

CSSでの垂直方向の配置

CSS では、vertical-align プロパティは、インライン レベルの要素またはその要素を含む要素内の表セルの垂直方向の配置を制御します。これは、テキスト行の一部である要素、またはインラインブロックまたはテーブルセルとして表示される要素に適用されます。

「vertical-align」プロパティは、テキスト行内の画像、テキスト、またはインラインブロック要素などのインライン要素によく使用されます。これはブロックレベルの要素には直接適用されません。ただし、フレックスボックスや位置決めなどのテクニックを使用して、それらを垂直方向に揃えることができます。

構文：

ここでは、vertical-align プロパティの基本的な構文を示します。

 selector { vertical-align: value; }

「値」には次のオプションのいずれかを指定できます。

    ベースライン:要素のベースラインをその親要素のベースラインと位置合わせします。これは、ほとんどの要素のデフォルト値です。サブ：要素のベースラインを親要素のフォントの下付きベースラインと位置合わせします。素晴らしい：要素のベースラインを親要素のフォントの上付きベースラインに揃えます。上：要素の上部を、ライン ボックス内のライン上の最も高い要素の上部に揃えます。テキスト上部:要素の上部を親要素のフォントの上部に揃えます。真ん中：親要素を基準にして要素を垂直方向の中央に配置します。底：要素の下部を、行ボックス内の行上の最下位の要素の下部に位置合わせします。テキスト下部:要素の下部を親要素のフォントの下部に揃えます。パーセンテージ:要素は、行の高さの指定された割合で垂直方向に整列されます。たとえば、vertical-align: 50% と指定すると、要素が親要素内で垂直方向の中央に配置されます。

注: 「vertical-align」は、要素のタイプとそれが使用されるコンテキストに応じて特定の動作を行うため、その効果は必ずしも単純ではない可能性があることに注意してください。これは、インライン要素をテキストまたは他のインライン要素と位置合わせする場合に特に便利です。

例

CSS の「vertical-align」プロパティに関連する詳細と例を次に示します。

1. ベースラインの調整:

    垂直方向に整列したベースラインvalue は、要素のベースラインをその親要素のベースラインに合わせます。これは、ほとんどのインライン レベル要素のデフォルトの動作です。

ベースライン その他のテキスト

2. 下付き文字と上付き文字:

    垂直方向の配置:サブ値は、要素のベースラインを親要素のフォントの下付き文字ベースラインに揃えて、下付き文字として表示します。一方で、垂直整列:Super は、要素のベースラインを親要素のフォントの上付きベースラインに合わせます。

H2○は水です。バツ2+と2= r2

3. 上下の位置合わせ:

    垂直方向の配置:上部の値は、要素の上部をライン ボックス内のライン上の最も高い要素の上部に揃えます。同様に、垂直整列:「下端」は、要素の下端を行ボックス内の行の最下位要素の下端に揃えます。

上揃え 下揃え

4. 中央の配置:

Javaでの文字列配列の作成
    垂直方向の配置:中央の値は、親要素を基準にして要素を垂直方向の中央に配置します。これは、テキスト内のアイコンや画像を中央に配置するためによく使用されます。

このアイコンは垂直方向の中央に配置されています アイコン

5. テキストの上とテキストの下の配置:

    垂直方向の配置:Text-top 値は、要素の上部を親要素のフォントの上部に揃えます。垂直整列:Text-bottom は、要素の下部を親要素のフォントの下部に揃えます。

テキストの上揃え テキストの下揃え

6. パーセンテージの調整:

垂直方向の配置でパーセンテージ値を使用すると、特定の行の高さのパーセンテージで要素を垂直方向に配置できます。たとえば、vertical-align: 50% は、要素を行の高さの半分の中央に配置します。

垂直方向の中央揃え

数字で言えば100万

7. ブロックレベル要素の垂直方向のセンタリング:

ブロックレベル要素をその親内で垂直方向の中央に配置するには、フレックスボックスまたはグリッド レイアウトを使用できます。

 Flexbox example: html Vertically Centered css .parent { display: flex; justify-content: center; align-items: center; height: 200px; /* Set the desired container height */ }

8. 要素の高さが不明な場合の垂直方向のセンタリング:

垂直方向の中央に配置したい要素の高さがわからない場合は、位置と変換を組み合わせて使用​​できます。

 html Vertically Centered (Unknown Height) CSS .parent { position: relative; height: 200px; /* Set the desired container height */ } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

9. 複数行のテキストでの垂直方向の中央揃え:

コンテナ内で複数行のテキストを垂直方向の中央に配置するには、フレックスボックスと疑似要素の組み合わせを使用できます。

 html Multi-line <br>Vertically Centered Text CSS .parent { display: flex; align-items: center; height: 200px; /* Set the desired container height */ } .child { flex: 1; text-align: center; } .child::before { content: &apos;&apos;; display: inline-block; vertical-align: middle; height: 100%; }

10. 異なるアスペクト比を持つコンテナ内の画像の垂直方向の中央揃え:

さまざまなアスペクト比の画像をコンテナ内で中央に配置したい場合は、フレックスボックスとオブジェクトフィットを組み合わせて使用​​できます。

HTML: 

 <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css.webp" alt="Image 1"> <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css.webp" alt="Image 2">

CSS: 

 .parent { display: flex; align-items: center; justify-content: center; height: 200px; /* Set the desired container height */ } img { object-fit: contain; max-height: 100%; }

11. 垂直方向の位置揃えと行の高さを組み合わせる:

vertical-align プロパティと line-height プロパティを組み合わせて、特に大きなフォント サイズの場合に、より正確な垂直方向の配置を実現できます。

 .element { font-size: 24px; line-height: 1.5; vertical-align: middle; }

12. 配置のための表示プロパティの使用:

垂直方向の配置は主にインライン レベルの要素で機能しますが、表示プロパティを変更して、特定のコンテキスト内のブロック レベルの要素の垂直方向の配置を実現できます。

 .container { display: table-cell; vertical-align: middle; }

13. 表の垂直方向の配置:

vertical-align プロパティは、表のセルでよく使用されます () セル内のコンテンツの配置を制御します。

 td { vertical-align: middle; }

14. インラインブロック要素の配置:

垂直方向の配置を使用すると、テキストの横にアイコンを配置するなど、テキスト行内のインライン ブロック要素を配置できます。

 <span>&#x2B50;</span> Star Rating .icon { vertical-align: middle; font-size: 24px; }

これらは、さまざまなシナリオで垂直方向の配置を処理する例のほんの一部です。特定のレイアウトと要件に応じて、目的の結果を達成するためにこれらの手法を適応または組み合わせる必要がある場合があります。 CSS は、さまざまなコンテキストで垂直方向の配置を効果的に処理するためのさまざまなツールを提供します。

vertical-align プロパティには用途がありますが、すべての配置シナリオ、特にブロックレベルの要素に対して、より包括的なソリューションが存在することに注意してください。より複雑なレイアウトや配置要件の場合は、より効果的かつ予測どおりに望ましい結果を達成するために、フレックスボックス、CSS グリッド、さらには CSS 位置値 (絶対値や相対値など) などの最新の CSS レイアウト手法を検討することをお勧めします。

「vertical-align」はインラインレベルの要素または表のセルにのみ影響することに注意してください。フレックスボックス、グリッド レイアウト、位置決めなどのテクニックを使用して、ブロック レベルの要素を垂直に配置します。

リストソートJava

さらにいくつかの例

 table, th, td{ border: 2px solid red; border-collapse: collapse; font-size: 20px; } #super{ vertical-align: super; } #sub{ vertical-align: sub; } <table class="table"> <td>baseline</td> <td>middle</td> <td>bottom</td> <td>top</td> <td>Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. </td> </table> <h2> Use of super and sub values </h2> <h3>Using super value: x<span id="super">2</span>+ y<span id="super">2</span> = r<span id="super">2</span></h3> <h3> Chemical formula of Water by using sub value: H<span id="sub">2</span>O</h3>
今すぐテストしてください

出力

CSSでテキストを縦方向に揃える方法

次に、テキストと画像を位置合わせする別の例があります。

例

 div{ font-size: 20px; border: 2px solid red; } img{ width:150px; height: 100px; } img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } img.middle { vertical-align: middle; } An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp"> image with a default alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a text-bottom alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a middle alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a text-top alignment.
今すぐテストしてください

出力

CSSでテキストを縦方向に揃える方法

CSS での垂直配置の利点

    インライン要素の使いやすさ:vertical-align プロパティは、テキストまたは他の要素の行内で画像、アイコン、テキストなどの要素を整列させるのに簡単です。ワイドブラウザのサポート:vertical-align プロパティはブラウザーを適切にサポートしており、さまざまなブラウザー間で広くサポートされています。複数の配置オプション:ベースライン、中央、上、下、テキスト上、テキスト下、下付き文字、上付き文字などのさまざまな配置オプションが用意されているため、開発者は要件に基づいて要素を柔軟に配置できます。レスポンシブアライメント:レスポンシブ デザインで使用すると、コンテナーのサイズまたは利用可能なスペースに基づいて垂直方向の配置を調整できます。インライン要素の簡素化:テキスト行内でアイコンや画像などの小さな要素を整列させる場合、vertical-align プロパティを使用すると、複雑なレイアウト技術を必要とせずに比較的単純なソリューションが提供されます。微調整：このプロパティを使用すると、要素の垂直位置を微調整できるため、特定の設計目標を達成するのに役立ちます。表のセルとの一貫性:テーブルのコンテキストでは、vertical-align プロパティはテーブルのセル内のコンテンツの配置を制御します。これは、テーブルベースのレイアウト間で一貫性を維持するのに役立ちます。テキストと組み合わせる:アイコンやインライン ラベルを隣接するテキストに揃えるなど、要素をテキスト コンテンツに効果的に揃えます。アスペクト比の維持:テキスト行内で画像やアイコンを配置する場合、特に適切なフォント サイズと行の高さを組み合わせた場合、垂直方向の配置はこれらの要素のアスペクト比を維持するのに役立ちます。簡単な位置調整の修正:垂直方向の配置の問題を迅速に修正する必要がある場合、特にコンテンツが混在するシナリオでは、垂直方向の配置を使用すると、大規模なレイアウトの再構築を必要とせずに迅速な解決策を提供できます。CSS 電子メールのスタイル:複雑なレイアウトをより適切にサポートする必要がある HTML 電子メールでは、垂直方向の配置を使用すると、外部のスタイルシートや複雑な技術に依存せずに要素の基本的な垂直方向の配置に役立ちます。ディスプレイとの互換性:inline-block:vertical-align プロパティは inline-block 要素と互換性があり、行内でそのような要素を簡単に垂直方向に配置できます。一貫性の維持:表形式データの一部である要素、または異なる行または列にまたがる同様の要素と位置を合わせる必要がある要素の場合、垂直方向の位置合わせは視覚的な一貫性を維持するのに役立ちます。ブラウザの互換性:一部の新しい CSS テクニックとは異なり、vertical-align は長い間 CSS の一部であり、ブラウザー間の互換性が良好です。

CSSの垂直配置のデメリット

    インライン要素に限定:vertical-align プロパティの最も重要な制限は、このプロパティがインライン レベルの要素またはテーブル セルに対してのみ機能することです。ブロックレベルの要素には直接適用されません。これにより、大きな要素や複雑なレイアウトの場合、垂直方向の位置合わせがより困難になる可能性があります。一貫性のない動作:垂直方向の配置は、特にフォント サイズ、行の高さ、ネストされた要素が異なる場合、扱いが難しく、一貫性がなくなる可能性があります。同じ垂直方向の配置値でも、コンテキストに応じて異なる結果が生成される場合があります。ブラウザの特徴:一部の古いブラウザでは、vertical-align プロパティに一貫性のない解釈や癖があり、予期しない結果が生じる可能性があります。ただし、この問題は最新のブラウザの進歩により改善されました。間隔の制限された制御:vertical-align プロパティは主に要素の垂直方向の整列を処理しますが、要素間の間隔を少し制御するだけです。間隔を調整するには、多くの場合、追加の CSS または HTML の変更が必要になります。代替としてのフレックスボックスとグリッド:より複雑なレイアウト要件やブロックレベル要素の垂直方向の配置の場合、開発者は多くの場合、より堅牢で予測可能なソリューションを提供する Flexbox または CSS Grid を利用します。フルセンタリングには適していません:垂直方向の配置は、インライン要素を垂直方向に整列させるのに便利ですが、追加の CSS テクニックを使用してブロックレベルの要素を完全に中央揃え (水平方向および垂直方向) に配置するのに適しています。誤解を招く名前:「vertical-align」という名前は、開発者がよく期待する方法で要素を垂直方向に整列させないため、誤解を招く可能性があります。代わりに、行ボックス内の要素のコンテンツの配置を制御します。さまざまなフォントによる複雑さ:フォント サイズや行の高さが異なる要素を扱う場合、垂直方向の配置の動作は予測できない場合があります。これにより、一貫した垂直方向の位置合わせが困難になる可能性があります。複雑なレイアウトの場合に制限されます:これは、親コンテナー内でより大きなブロックレベルの要素を垂直方向に整列させる必要がある複雑なレイアウトやシナリオには適していません。ブラウザ間の互換性:最新のブラウザでは垂直方向の配置のサポートが強化されていますが、古いブラウザでは依然として不整合や予期しない動作が発生する可能性があります。代替テクニック:Flexbox や CSS Grid などの最新の CSS レイアウト手法は、インライン レベル要素とブロック レベル要素の両方の垂直方向の配置など、複雑なレイアウト要件を処理するためのより強力で予測可能な方法を提供します。アクセシビリティに関する考慮事項:レイアウトに垂直方向の配置を使用することは、スクリーン リーダーやその他の支援技術に干渉する可能性があるため、最もアクセスしやすいアプローチではない可能性があります。多くの場合、セマンティック HTML と適切な CSS テクニックは、アクセシビリティにとってより良い選択です。デバッグの課題:予期せぬ動作や垂直方向の配置に関連する配置の問題のデバッグは、特にネストされた要素やさまざまなフォント サイズを扱う場合に、難しい場合があります。Web レイアウトの進化:Web 開発環境が進化するにつれて、CSS グリッド レイアウトやフレックスボックスなどの新しいレイアウト技術が、レイアウトの課題に対するより最新かつ包括的なソリューションを提供し、多くのシナリオで垂直方向の配置の関連性が薄れる可能性があります。

全体として、vertical-align プロパティは、テキスト行内のインライン要素や表のセルを整列させるのに便利ですが、開発者は、特にブロックレベルの要素や複雑なレイアウトを扱う場合、より高度なレイアウトや位置決めの要件のために他の CSS テクニックを必要とすることがよくあります。 CSS Flexbox と CSS Grid は、より広範な配置と位置制御のための強力な代替手段です。

結論

vertical-align プロパティは、テキストまたは表のセル内のインライン要素を整列させるのに役立ちます。ただし、制限があり、複雑なレイアウトやブロックレベルの要素に対して効果的に使用するのが難しい場合があります。開発者は、配置と配置をより詳細に制御し、柔軟性を提供する最新の CSS レイアウト手法を検討する必要があります。