CSS の水平方向と垂直方向の中央揃えの概要_html/css_WEB-ITnose

実際の仕事では、水平センタリングまたは垂直センタリングが必要なシナリオによく遭遇します。今日は、水平センタリングと垂直センタリングを設定する方法を見ていきます。
まず水平方向のセンタリングを見てみましょう。
1. 水平方向のセンタリング設定 - インライン要素。
要素がテキストに設定されている場合。画像などのインライン要素を使用する場合、親要素に text-align:center を設定することで水平方向の中央揃えが実現されます。
2. 水平方向のセンタリング設定 - 固定幅のブロック要素。
設定される要素がブロック要素である場合、text-align: center は機能しません。固定幅ブロック要素と可変幅ブロック要素の 2 つの状況があります。まず、固定幅のブロック要素について説明します。
「左右の余白」の値を「自動」に設定することで、固定幅とブロック形状の2つの条件を満たす要素を中央揃えにすることができます。
3. 水平方向のセンタリングのまとめ - 幅可変のブロック要素の方法 (1)
実際の作業では、Web上のページナビゲーションなどで「幅が可変のブロック状要素」に対してセンタリングを行う必要が出てきます。ページ。ページ数が未定義であるため、幅を設定して弾力性を制限することはできません。
可変幅でブロック要素を中央に配置するには 3 つの方法があります (現在、これら 3 つの方法がより頻繁に使用されます):
1. テーブルタグを追加します




可変幅でブロック要素を水平方向に中央に配置します

Set display;inline メソッド: ブロックレベル要素の表示をインラインタイプに変更し、text-align:center を使用して中央揃え効果を実現します
position:relative および left:50% を設定します。
親要素に float を設定し、親要素にposition:relative および left:50% を設定し、親要素にposition:relative および left:-50% を設定することで、水平方向のセンタリングを実現します。子要素。




さまざまな幅のブロック要素を水平方向に中央揃えにします

この方法を学びましょう。

垂直方向の中央揃え - 高さが親要素によって決定される単一行のテキスト
1. 高さが親要素によって決定される単一行のテキストの垂直方向の中央揃え方法は、高さと親要素の行の高さを一貫させる必要があります。
垂直中央揃え - 親要素の高さを指定した複数行のテキスト (方法 1)
insert table (tbody、tr、td を含む) タグを使用し、vertical-align: middle を設定します。
垂直方向のセンタリングといえば、CSSには垂直方向のセンタリング用のプロパティvertical-alignがありますが、このスタイルは親要素がtdまたはthの場合にのみ有効です。 td タグはデフォルトでvertical-alignをmiddleに設定するため、明示的に設定する必要はありません。




親要素の高さが決定された複数行テキスト

決定された高さの垂直方向中央揃えの複数行テキスト親要素 (方法 2 )
Chrome、Firefox、および IE8 以降のブラウザでは、ブロックレベル要素の表示をテーブルセルに設定し、vertical-align 属性をアクティブにすることができますが、IE6 および 7 はこのスタイルをサポートしていないことに注意してください。




親要素の高度に定義された複数行テキスト