1. ホーム
  2. Web プログラミング
  3. CSS/HTML
  4. 経験の共有

cssのテキストを垂直方向に中央寄せにする8つの方法

2022-01-17 04:33:34

注:以下のデモはモダンブラウザのみで、IEやその他の非主流ブラウザの低バージョンには対応していません。

cssのテキストを垂直方向にセンタリングする方法は、以下の8通りです。

1. 絶対位置とネガティブマージンを利用したブロックレベル要素の垂直方向へのセンタリング

cssの垂直方向へのセンタリング効果。

cssの垂直中央揃えコード。

この方法は互換性がありますが、小さな欠点があります。それは、中央に配置されるブロック-レベル要素のサイズをあらかじめ知っておかなければ、垂直方向に正確に中央配置されないということです。

2. 絶対位置とトランスフォームを使用する

コードはこのようになります。

この方法の明らかな利点は、transform のパーセント オフセットは要素自体のサイズに対する相対値であるため、センタリングする要素のサイズを前もって知っておく必要がないことです。

3. 絶対位置とmargin:autoの組み合わせ

この方法の核となるのは、縦方向の中央に配置する要素を親要素に対して絶対的に配置することと、上下を等しい値に設定することです。ここでは0に設定していますが、もちろん99999pxでも-99999pxでも、等しければ何でもかまいません。この手順が終わったら、中央寄せにする要素のマージンをautoに設定して、縦方向に中央寄せにできるようにします。

中央に配置する要素の幅は省略することもできますが、その場合は画像のように独自の寸法を持つ要素でなければうまくいきません。

4. パディングを使った子要素の垂直方向へのセンタリング

これは、親要素の上下のマージンを等しく設定する非常に簡単な方法で、子要素が自然に垂直方向に中央配置されるようになります。当然ながら、親要素はこの時点で高さを設定することができず、自動的に埋めなければなりません。また、トップマージン+子要素の高さ+ボトムマージンと正確に等しい値に設定しなければ、正確に垂直方向の中央揃えはできません。

この方法は専門的でないように見えるかもしれませんが、実は特定のシナリオでは非常にうまく機能します。

5. フレックスレイアウトの利用

フレックスレイアウトにはいろいろなものが使われているので、ここでは簡単に紹介しますので、もっと詳しく知りたい方は阮氏のブログをご覧ください。

flexはflexibleとも呼ばれ、柔軟な、しなやかな、簡単に曲げられるという意味があります。

display:flex;を設定することで、フレックスレイアウトのコンテナとして要素を指定することができます。コンテナを指定したら、それにalign-items属性を追加します。この属性は、交差する軸(この場合は縦の周囲)上での項目の配置を定義し、以下のように5つの値が可能です。

flex-start:交差軸の開始位置のアライメント、flex-end:交差軸の焦点位置のアライメント。

center: 十字路のフォーカスアライメント、ベースライン項目のテキスト1行目のベースラインアライメント。

strech(この値はデフォルトです):アイテムの高さが設定されていない場合、またはautoに設定されている場合、コンテナの高さ全体を占拠します。

6. 柔軟なレイアウト

この方法では、親要素にもdisplay:flexを設定し、設定後、4つの値を持つスピンドルのflex-direction:columnを次のように変更します。

row(これがデフォルト):主軸は水平で、左端から始まる。

row-reverseでは、主軸は水平で、始点はhad endになります。

column-major軸は垂直で、上端から始まる。

column-reverse:主軸が垂直で、下端から始まる。

justify-content属性は、主軸上での項目の配置を定義し、以下のように5つの値が可能です(正確な配置は主軸の方向に関係しますが、以下の値は主軸が左から右であると仮定しています)。

flex-start(この値がデフォルトです):左寄せになります。

flex-end: 右寄せにします。

center:center-aligned.

space-between: 両端を揃え、項目間の間隔を揃える。

space-around:個々のアイテムの両側が等間隔に配置されています。

7. 1行のテキストを垂直方向にセンタリングするもう一つの方法は、これまで何度も見てきたように、line-heightを使用することです。

ここで、ちょっとした落とし穴があります。line-height(行の高さ)の値を100%にすることはできません。公式ドキュメントにあるline-heightのパーセントでの説明を見てみましょう。現在のフォントサイズに基づいた行間のパーセントで、パーセントであればフォントサイズに対する相対値であることが理解できると思います。

8. display と vertical-align を使って、コンテナ内のテキストを垂直方向に中央揃えする。

vertical-alignについて一言:vertical-align属性は、valign機能を持つhtml要素、例えばテーブル要素の<td><th>などにのみ作用し、<div><span>などの要素には作用しない。

valign属性は、セル内のコンテンツの垂直方向の配置を指定します。構文: <tdvalign="value"> で、valueには4つの値があります。

top: コンテンツの上端を揃える

middle: コンテンツを中央揃えにする

bottom: コンテンツを下向きに配置します。

baseline: ベースラインの調整

ベースライン値について ベースラインとは仮想の線のことです。ベースライン値は、行内のすべての表データが同じベースラインを共有するように設定します。この値は、多くの場合、bottom値と同じ効果を持ちます。しかし、テキストに異なるフォントサイズがある場合は、ベースラインの方がより効果的です。

CSSを縦方向にセンタリングする方法の詳細については、この記事の下にある関連記事を参照するか、編集者に相談してください。