4でdivを中央に配置する方法

王林
リリース: 2024-09-05 06:32:02
オリジナル
749 人が閲覧しました

How to center a div in 4

div をセンタリングすることは、ソフトウェア開発者、特に CSS を含むフロントエンド テクノロジに苦労することが多い私のようなバックエンド開発者の間で長年のミームでした。

良いニュースは、新しい align-content CSS プロパティのおかげで、この闘いがついに終わったことです。もちろん、このプロパティは垂直方向の配置のみを処理します。詳細については後ほど説明します。

歴史的にどのように行われていたか

align-content が導入される前は、通常、垂直方向の配置を実現するには CSS グリッドまたは Flexbox を使用する必要がありました。

グリッドの例:

<div style="display: grid; align-content: center; justify-content: center; height: 100vh;">
    Hello World!
</div>
ログイン後にコピー

フレックスボックスの例:

<div style="display: flex; flex-direction: row; align-items: center; justify-content: center; height: 100vh;">
    Hello World!
</div>
ログイン後にコピー

justify-content プロパティは、グリッドとフレックスボックスの両方で div コンテンツの水平方向の配置に使用されます。通常の div の場合は、次のように text-align を使用するだけです:

<div style="text-align: center; height: 100vh;">
    Hello World!
</div>
ログイン後にコピー

2024 年にどうなるか

align-content の導入により、それぞれにいくつかの欠点があるグリッドとフレックスボックスに依存する必要がなくなりました。以下を使用すると、同じ結果をよりきれいに達成できます:

<div style="align-content: center; height: 100vh;">
    Hello World!
</div>
ログイン後にコピー

前述したように、これは垂直方向の配置のみを処理します。水平方向の配置については、信頼性の高い text-align プロパティを align-content と組み合わせて使用​​できます。

<div style="align-content: center; text-align: center; height: 100vh;">
    Hello World!
</div>
ログイン後にコピー

サポートされるブラウザの最小バージョンは Chrome 123、Firefox 125、Safari 17.4 であることに注意してください

リソース

  • MDN Web ドキュメント: align-content
  • 独自の CSS 垂直センターを作成

注目の画像のクレジット

  • ChatGPT によって生成された注目の画像

以上が4でdivを中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート