CSS で Div を確実に垂直方向の中央に配置するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS で Div を確実に垂直方向の中央に配置するにはどうすればよいですか?

Barbara Streisand

リリース： 2024-11-30 22:46:12

オリジナル

653 人が閲覧しました

How Can I Reliably Vertically Center a Div in CSS?

CSS の垂直方向のセンタリング: 問題のある取り組み

を垂直方向のセンタリング中に別のタスク内で実行するのは簡単なタスクのように思えるかもしれませんが、CSS では課題が生じることがよくあります。「top:50%」または「vertical-align:middle」を使用する従来の方法は、CSS ボックスモデルの固有の制限により失敗します。

内部の

が高さは固定されており、相対的な位置決めと負のマージン高さを使用して垂直方向のセンタリングを実現できます。ただし、内部の

が

である場合、このアプローチはより複雑になります。

質問が示すように、テーブルは垂直方向の中央揃えと横並びのレイアウトの信頼できるソリューションを提供します。テーブルセルは垂直方向のセンタリングに効果的に対応し、ブラウザ間の互換性を提供します。 CSS 界隈では「反テーブル」の感情が広まっているにもかかわらず、テーブルは依然として特定のレイアウト要件を達成するための貴重なツールです。

CSS の支持者は、テーブルを時代遅れまたは非効率であるとして却下し、「CSS 宇宙飛行士」などの造語を作ることがよくあります。ただし、垂直方向の中央揃えと左右のレイアウトを処理する際の CSS の制限を見過ごすことはできません。ネストされた div と複雑な位置決め技術を使用する提案されたソリューションでさえ、テーブルを使用する単純さと比較すると複雑で非実用的であるように見えます。最終的に、CSS とテーブルのどちらを選択するかは、プロジェクトの特定のニーズと優先順位によって決まります。シームレスな垂直方向のセンタリングと信頼性の高いレイアウトが不可欠な場合、テーブルは実証済みの効率的なソリューションを提供しますが、CSS 愛好家は複雑なテクニックを検討して、潜在的な互換性の問題に対処する可能性があります。

以上がCSS で Div を確実に垂直方向の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：php.cn

前の記事：Bootstrap 3 および Bootstrap 4 で複数行の列を作成するにはどうすればよいですか? 次の記事：Bootstrap 3 の折りたたみインジケーターをシェブロンアイコンでカスタマイズするにはどうすればよいですか?

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事