CSSのテキストとアイコンを垂直に集中する方法

この記事では、かつては扱いにくいが、実装しやすいさまざまなCSS水平および垂直センタリング方法を紹介します。 FlexBoxとPositioning Plus Transformationを使用して、水平および垂直のセンタリングをカバーします。別の記事では、水平および垂直のセンタリングにCSSグリッドを使用する方法も取り上げます。

キーポイントの概要

概要

• FlexBoxの使用垂直中心のテキストとアイコンを使用します。コンテナをFlexコンテナに変換し、justify-contentおよびを使用して、中央の子要素に使用します。 align-items
• とpositionの組み合わせは、特に非常に可変的な要素の場合、垂直センタリングを実現できます。これは、位置決めコンテキストを作成し、そのコンテナに対する要素の位置を調整することによって行われます。 transform
• 属性は、固定された高さのコンテナ内の単一のテキストまたはアイコンを垂直に中央に集中させるために使用できますが、line-heightはインライン要素の中心に使用できます。 vertical-align

flexboxを水平および垂直センターに使用する方法

FlexBoxは、要素を水平および垂直に整列させることができ、それにより、テキスト、アイコン、またはCSSのその他の要素を中心に配置できます。

FlexBoxセンタリング要素を使用するには、次のコードスニペットを使用できます。

このコードスニペットは、

をフレックスコンテナに変換し、子要素をFlexプロジェクトに自動的に変換します。その後、

<code class="language-css">.container {
  display: flex;
  justify-content: center;
  align-items: center;
}</code>

を使用して、これらのフレックスアイテムを水平に中央に配置し、

を使用して垂直に中央に配置できます。 .container 例：justify-contentcodepen linkalign-items

続行して、ボックスモデルの垂直方向の位置決めと位置決め技術について学びます。

柔軟な垂直センタリングを実現するために位置と変換を使用する方法

FlexBoxを使用できない場合、またはコンテナにアイテムを中央に配置する必要がある場合は、を使用してコンテナの中央に要素を配置できます。

代わりに、

を組み合わせて、垂直に中心に変換される非常に可変的な要素に変換できます。たとえば、ビューポートの高さ全体に垂直に要素を中央に配置するには、次のコードスニペットを使用できます。 position

最初に、コンテナ要素に

を設定して、位置決めコンテキストを作成します。これにより、その境界内にposition要素を見つけることができます。

<code class="language-css">.container {
  position: relative;
  min-height: 100vh;
}
.vertical-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}</code>

次に、要素の左上隅を配置して、親要素の上部の50％に上端を配置し、左端を左端の左の50％に配置することで、コンテナの中央に配置します。親要素の場所。

position: relative最後に、高さの50％と幅の50％を左に上にパンすることで、要素を中央に戻します。これで、私たちの要素は、容器内の垂直および水平方向に中央に配置されています。配置は、要素のサイズに対するパーセンテージ値を使用して行われるため、コンテナまたは子要素の幅または高さが変更された場合、要素は中心のままになります。 .vertical-center 例：

codepen link

ラインハイイトを使用して固定された高さで垂直に中央に集中する方法コンテナ内に垂直にテキストまたはアイコンの単一行を中央に配置するには、

属性を使用します。このプロパティは、テキスト実行のラインの高さを制御し、インライン要素のワイヤフレームの上と下の等量のスペースを追加します。容器の高さがわかっている場合、同じ値の

を設定すると、子要素が垂直に去勢されます。 line-height line-height

<code class="language-css">.container {
  display: flex;
  justify-content: center;
  align-items: center;
}</code>

インライン要素の中心に垂直アライを使用する方法

属性は、

、

、またはvertical-alignとして表示される要素のみに影響します。 inline inline-block長さ、パーセンテージ、またはキーワード値が必要です。 table-cell

長さとパーセンテージは、要素のベースラインを親子要素のベースラインを上回る距離を整列させます。

キーワード値は、次のいずれかです

• baseline
• sub
• super
• text-top
• text-bottom
• middle
• top
これらのほとんどは非常に直感的ですが、ベースラインを親要素のサブスクリプトベースラインに並べ、
• 要素のベースラインを親子要素の上付き文字ベースラインに合わせます。 bottom
実用的な例で

を見てみましょう。

subここに画像とテキストグリッドがあり、どちらも高さが異なります。つまり、テキストがすべてきれいに揃っているわけではありません。 super

（元のテキストのHTMLコードをここに挿入し、それに応じて修正する必要があります。

グリッドコンテナをvertical-alignに設定し、画像上の

を使用して、すべてをきちんと並べることができます。

ここにテキストがなく、すべての画像を垂直に中央に配置したい場合は、

を使用して、かなり良い結果を得ることができます。

その他のセンタリング方法については、水平および垂直センタリングにCSSグリッドの使用方法を確認してください。 display: inline-block vertical-align: bottom

cssで垂直にテキストとアイコンを中央に集中させる方法についてのfaq

vertical-align: middle

（元のFAQパーツがここで合理化され、コア情報を保持し、いくつかの答えをより明確に表現しています。）

）

垂直アライメントとは何ですか？ CSSの垂直アライメントは、垂直軸に沿った要素の位置を制御する属性です。これは、レイアウトを正確かつ柔軟に設計するのに役立つ強力なツールです。要素の中心を垂直に使用したり、コンテナの上部または下部に整列したり、垂直空間に均等に配布することもできます。 CSSの

属性は通常、インラインまたはインラインブロック要素で使用されますが、テーブルセルでも使用できます。

CSSを使用してテキストを垂直に中心に使用する方法は？

およびvertical-alignを使用して、テキストを垂直に集中させることができます。

垂直方向のアライメントを使用してブロックレベルの要素を処理できますか？

ブロックレベルの要素は、position: relative; top: 50%; transform: translateY(-50%);を使用して垂直に整列できます。

なぜ私の垂直方向のアライメントが機能しないのですか？

原因には、高さを指定しない親コンテナ、またはvertical-alignを使用してブロックレベルの要素を整列させようとすることが含まれます。

画像を垂直に整列させる方法は？

テキストと同じ方法を使用できます。

CSSグリッドを処理するために垂直アライメントを使用できますか？

属性を使用できます。 align-items

ボタンでテキストを垂直に整列する方法は？

は、

属性とともに使用できます。その値は、ボタンの高さと同じでなければなりません。 line-height

複数の要素を垂直に整列させる方法は？

フレックスまたはグリッドメソッドを使用できます。

垂直アライメントを使用して絶対的な位置決めを処理できますか？

および

プロパティを使用できます。 top transform

テーブルセルにテキストを垂直に整列する方法は？

使用できます

。

以上がCSSのテキストとアイコンを垂直に集中する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。