CSS を使用して Div 内でテキストを垂直方向に中央揃えにする

CSS を使用して Div 内でテキストを垂直方向に中央揃えにする
CSS を使用して Div 内でテキストを垂直方向に中央揃えにする
Alice Dupont
2024年7月13日土曜日 21:35:17

CSS を使用して Div 内のテキストを垂直中央揃えにする

div 内でテキストを垂直方向に整列させることは、Web デザインでは一般的な課題となることがあります。テキストが完全に中央に配置されるようにすると、コンテンツの美しさと読みやすさが向上します。

この記事では、CSS を使用して div 内のテキストの垂直方向の中央揃えを実現するさまざまな方法を検討します。簡単な例から始めて、さまざまなブラウザーやデバイス間での互換性を確保するためのより高度なテクニックを詳しく掘り下げていきます。

指示 説明
display: flex; フレックス コンテナを定義し、フレックスボックス レイアウトの使用を有効にします。
justify-content: center; フレックス コンテナ内のフレックス項目を水平方向の中央に配置します。
align-items: center; フレックス コンテナ内でフレックス項目を垂直方向の中央に配置します。
display: grid; グリッド コンテナを定義し、グリッド レイアウトの使用を有効にします。
place-items: center; アイテムをグリッド コンテナー内で水平方向と垂直方向の両方に中央揃えにします。
display: table; 要素をテーブルとして定義し、テーブル レイアウト プロパティを適用できるようにします。
display: table-cell; 要素を表のセルとして定義し、垂直方向の配置プロパティを有効にします。
vertical-align: middle; テーブルセル要素内のコンテンツを垂直方向の中央に配置します。
line-height: 170px; 行の高さをコンテナの高さと同じに設定し、テキストを垂直方向の中央に配置します。

CSS を使用してテキストを垂直方向に中央揃えにするテクニック

最初のスクリプト例では、次を使用します。 display: flex; フレックスコンテナを定義します。これにより、Flexbox レイアウト プロパティを使用できるようになります。設定することにより justify-content: center; そして align-items: center;、テキストを水平方向と垂直方向の中央に配置できます。

要素。この方法は非常に効果的で実装が簡単なため、最新の Web デザインで人気の選択肢となっています。 Flexbox は、その応答性と調整の容易さで特に便利で、開発者はさまざまな画面サイズや方向に適応するレイアウトを作成できます。

2 番目のスクリプト例では、次を使用して CSS グリッド レイアウトを使用します。 display: grid;。設定することにより place-items: center;を使用すると、テキストはグリッド コンテナー内で水平方向と垂直方向の両方の中央に配置されます。 CSS Grid は、従来の方法と比較して、Web レイアウトを設計するためのより強力で柔軟なシステムを提供します。複雑で応答性の高いデザインを簡単に作成できる機能を提供します。の place-items: center; コマンドは、垂直方向と水平方向の中央揃えを実現する簡潔な方法であり、コードが簡素化され、読みやすさが向上します。

垂直方向の中央揃えのための高度な CSS テクニック

3 番目のスクリプトでは、テーブル表示メソッドを使用します。設定 display: table; 容器の上と、 display: table-cell; で作成された擬似要素について ::before を使用できるようにします vertical-align: middle; 財産。この方法は表のセルの動作を模倣し、コンテンツを垂直方向の中央に配置することができます。このアプローチは、最新の Web デザインではあまり使用されていませんが、古いブラウザーとの互換性を維持したり、レガシー コードを処理したりする場合に役立ちます。新しいレイアウト システムに依存せずに、コンテンツを中央に配置する信頼性の高い方法を提供します。

4 番目のスクリプト例では、 line-height 財産。を設定することで、 line-height コンテナの高さに等しい場合、テキストは垂直方向の中央に配置されます。この手法は簡単で、単一行のテキストに効果的です。ただし、コンテナの高さが変化する可能性がある複数行のテキストや動的コンテンツには適さない場合があります。制限があるにもかかわらず、 line-height このメソッドは、単純なシナリオでテキストを垂直方向の中央に配置するための迅速かつ簡単なソリューションです。

Flexbox を使用した垂直方向のセンタリング

CSSフレックスボックス

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

グリッドを使用した垂直方向のセンタリング

CSSグリッド

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: grid;
  place-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

テーブル表示を使用して垂直方向のセンタリングを行う

CSSテーブル表示

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: table;
}
#box::before {
  content: "";
  display: table-cell;
  vertical-align: middle;
}
#box > div {
  display: inline-block;
  vertical-align: middle;
}
<div id="box"><div>Lorem ipsum dolor sit</div></div>

行の高さを使用した垂直方向のセンタリング

CSS の行の高さ

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  line-height: 170px;
  text-align: center;
}
<div id="box">Lorem ipsum dolor sit</div>

垂直方向の中央揃えのための CSS 変換の探索

テキスト内でテキストを垂直方向の中央に配置するもう 1 つの効果的な方法 div CSSを使用しています transform 財産。組み合わせることで position: absolute; と transform: translateY(-50%);、正確な垂直方向の位置合わせを実現できます。まず、 div に設定されています position: relative; 基準点として機能します。次に、子要素に position: absolute; は親コンテナの上位 50% に配置されます。最後に、申請する transform: translateY(-50%); 要素をその高さの半分だけ上に移動し、垂直方向の中央に完全に配置します。

この方法は柔軟性が高く、テキストや画像などのさまざまな種類のコンテンツに適しています。コンテンツの高さに関係なくセンタリング効果が一貫しているため、動的なコンテンツを扱う場合に特に便利です。さらに、組み合わせると、 transform 他の CSS プロパティと併用すると、より複雑で創造的なレイアウト デザインが可能になります。このアプローチでは、フレックスボックスやグリッドに比べて少し多くのコードが必要ですが、要素の位置を正確に制御できます。

CSS の垂直方向のセンタリングに関するよくある質問

  1. div内のテキストを垂直方向に中央揃えにする最も簡単な方法は何ですか?
  2. 使用する display: flex; と justify-content: center; そして align-items: center; 多くの場合、これが最も簡単で効果的な方法です。
  3. 古いブラウザでテキストを垂直方向の中央に配置するにはどうすればよいですか?
  4. テーブル表示メソッドを使用する display: table; そして vertical-align: middle; 古いブラウザで垂直方向の中央揃えを実現するのに役立ちます。
  5. CSS グリッドを使用してテキストを垂直方向に中央揃えにすることはできますか?
  6. はい、CSS グリッドは、次の方法を使用してテキストを垂直方向の中央に配置できます。 display: grid; そして place-items: center;。
  7. 複数行のテキストを垂直方向に中央揃えにすることはできますか?
  8. はい、Flexbox または CSS Grid を使用すると、複数行のテキストをコンテナ内で垂直方向に簡単に中央揃えできます。
  9. 既知のコンテナーの高さでテキストを垂直方向に中央揃えするにはどうすればよいでしょうか?
  10. 設定できるのは、 line-height プロパティをコンテナの高さに合わせて変更し、テキストを効果的に中央に配置します。
  11. コンテナの高さが動的である場合はどうなるでしょうか?
  12. フレックスボックス、グリッド、または transform このプロパティにより、コンテナーの高さが動的な場合でも、一貫した垂直方向のセンタリングが保証されます。
  13. 使用する上でのデメリットはありますか transform: translateY(-50%);?
  14. 効果的ではありますが、親が次のことを行う必要があります。 position: relative; また、Flexbox や Grid と比較して実装が若干複雑になる可能性があります。
  15. レスポンシブデザインでテキストを垂直方向の中央揃えにするにはどうすればよいですか?
  16. レスポンシブ デザインには、さまざまな画面サイズや方向によく適応するため、Flexbox または CSS グリッドを使用することを強くお勧めします。

垂直方向のセンタリングに関する最終的な考え

div 内のテキストを垂直方向の中央揃えにするには、いくつかの効果的な方法を使用します。 Flexbox や Grid などの最新の技術は、最も柔軟で実装が容易です。テーブル表示や行の高さなどの古い方法は、特定のケースでは依然として役立つ場合があります。これらのさまざまなアプローチを理解して適用することで、開発者はコンテンツが視覚的に魅力的であり、さまざまなデバイスやブラウザー間で適切に配置されていることを確認できます。