CSS_html/css_WEB-ITnose を使用して垂直方向の中央揃えを実現する 5 つの方法

CSS を使用してオブジェクトの垂直方向の中央揃えを実現するにはさまざまな方法がありますが、難しいのは適切な方法を選択することです。私がこれまで見てきた良い方法と、中心にある良いウェブサイトを作成する方法を以下に説明しましょう。

CSS を使用して垂直方向の中央揃えを実現するのは簡単ではありません。一部のメソッドは一部のブラウザでは機能しません。以下では、オブジェクトを垂直方向の中央に配置する 5 つの異なる方法と、それぞれの長所と短所を見ていきます。 (簡単な説明については、テスト ページを参照してください。)

方法 1

このメソッドは、一部の div の表示モードをテーブルに設定するため、テーブルのvertical-align プロパティを使用できます。

コンテンツはここにあります

C SS

1	ラッパー {display:table ;} #cell {display:table-cell;vertical-align:middle;}

利点: コンテンツは高さを動的に変更できます (CSS で定義する必要はありません)。ラッパーに十分なスペースがない場合、コンテンツは切り詰められません

短所:

Internet Explorer では無効 (IE8 ベータ版でも)、多くのネストされたタグ (実際にはそれほど悪くありません。別のトピック)

方法 2:

このメソッドは、絶対位置の div を使用し、その上部を 50% に設定し、その上部マージンを負のコンテンツの高さに設定します。これは、オブジェクトの高さが CSS で指定された固定の高さを持つ必要があることを意味します。

高さが固定されているため、コンテンツに overflow:auto を指定すると、コンテンツが多すぎる場合にスクロール バーが表示され、コンテンツがオーバーフローするのを防ぐことができます。

コンテンツはここにあります

CSS

1	コンテンツ { 位置:絶対上位:50 %; height:240px; margin-top:-120px; /* 高さの負の半分 */ }

利点: ネストされたタグは必要ありません

欠点:十分なスペースがない場合、コンテンツは消えます (div が本文内にあり、ユーザーがブラウザー ウィンドウを縮小してもスクロール バーが表示されない状況と同様です)

方法 3

このメソッドでは、div はコンテンツ要素の外側に挿入されます。この div の高さを 50% に設定します。
コンテンツはフロートをクリアして中央に表示します。コンテンツはここにあります

CSS

1

floater {float:left; height: 50%; margin-bottom:-120px;} #content {clear :両方; 高さ:240ピクセル; 位置:相対;}

利点:
すべてのブラウザに適用可能
十分なスペースがない場合(例: ウィンドウが縮小されている場合)、コンテンツが切り詰められず、スクロールバーが表示されません

欠点:
私が考えることができる唯一のことは、追加の空要素の場合 (これもそれほど悪いことではありません。これは別のトピックです)

方法 4

このメソッドは、position:absolute、固定幅と高さの div を使用します。この div は、top:0;bottom:0; に設定されます。ただし、高さが固定されているため、実際には上下の間隔を 0 にすることはできず、margin:auto; によって中央に配置されます。 margin:auto; を使用すると、ブロックレベルの要素を垂直方向に中央揃えにするのが簡単です。

コンテンツはこちら

CSS

利点:

1	コンテンツ { 位置:絶対トップ:0;

IE (IE8 ベータ版) 十分なスペースがない場合、コンテンツは切り詰められますが、スクロール バーは表示されません

方法 5

この方法では、1 行のテキストのみを中央揃えにすることができます。 line-height をそのオブジェクトの高さの値に設定するだけで、テキストが中央に配置されます。

ここにコンテンツ
content {height:100px; line-height:100px;}

利点:

すべてのブラウザに適用可能

十分なスペースがない場合でも切り捨てられない

欠点:

テキストにのみ有効 (ブロックレベル)要素は無効です) )

複数の行がある場合、単語の区切りは悪化します

この方法は、ボタン テキストの中央揃えや単一行のテキストなどの小さな要素で非常に便利です。

どの方法ですか?

私のお気に入りは方法 3 ですが、欠点はほとんどありません。コンテンツはフロートをクリアするため、他の要素をその上に配置することができ、ウィンドウをズームすると、中央に配置されたコンテンツが他の要素を覆うことはありません。例を参照してください。

コンテンツはこちら

CSS

1

フローター {float:left:height:50%; ; margin-bottom:-120px;} #top {float:right; width:100%; text-align:center;} #content {clear:both;

何が起こっているかがわかったので、シンプルだけど楽しい Web サイトの作成を始めましょう。最終的な外観は次のようになります:

ステップ 1
セマンティック タグから始めるのが良いでしょう。以下は私たちのページの構成です:

floater/center the content/ #contred/center box/ #side #logo #nav/unowned list/ #content #bottom/place copyright, etc./

これは xhtml コードです使用:

A Center Company

--LODUCTS-CONTACT-About

ページタイトル

Holisticly Re -Gineer Value-ADDED ING AFTER PRO プロ セス中心のコラボレーションとアイデアの共有エネルギー的 有効な必須事項により、影響力のあるニッチ市場を簡素化します。強力なウェブ対応力を活用する前に、最先端の製品を使用して人的資本の高水準をシームレスに再捕捉します。すぐに使える情報です。 見出し 2

顧客主導のプロセスではなく、カスタマイズされた Web 対応を効率的に採用し、プロアクティブなテクノロジに対してクロスプラットフォームの義務を積極的に強化します。企業全体のインターフェイス。電子市場に焦点を当てて、競争力のある戦略的テーマ領域を効率的に合理化します。付加価値市場に対して蛍光を使用して総合的なサービスを適切に再構築します。

著作権表示。こちら

ステップ 2:

ここで、基本的な CSS を使用してページのスタイルを設定します。 HTML ページの上部にインポートされる style.css に次のコードを挿入します。

CSS

1 html, body { マージン:0; 高さ:100%; ; } body { 背景:url('page_bg.jpg') 50% 50% 繰り返しなし #FC3; フォントファミリー: ジョージア、タイムズ、セリフ; } #floater { 位置:相対; ; マージン-ボトム:-200px; } #centered {位置:相対; 高さ:800px; 最小幅:0px;背景:#fff; 境界:4px; } #bottom { 位置: 絶対; 右: 0; 70%; パディング: 20px; } #content { 位置: 絶対; 右: 0; 高さ: 340px; 10px; }

コンテンツを垂直方向の中央に配置する前に、本文と HTML を高さの 100% まで引き伸ばす必要があります。高さ
はパディングとマージンの範囲内にあるため、マージンが小さいためにスクロール バーが表示されないように、それらを 0 に設定する必要があります。

フローターの margin-bottom は、コンテンツの高さ (400px) の半分、-200px です。

これで効果がわかります:

中央揃えの幅は 80% です。これはディスプレイのサイズによって異なる場合があります。一般に流体レイアウトと呼ばれます。 Web ページが大きすぎたり小さすぎたりしないように、min-width と

max-width を設定します。 ただし、IE は最小/最大幅をサポートしていません。もちろん、代わりに固定幅を使用することもできます。

#centred は相対的に配置されるため、絶対配置を使用して要素を配置できます。スクロール バーが表示されないように #content の overflow:auto;
を設定します。 IE は、高さを指定しない限り (上下の位置や % ではなく) overflow:auto; をあまり好まないので、指定された高さを与えます。

ステップ 3

最後に、ページの見栄えを良くするためにスタイルを追加します。目次から始めましょう。

CSS

人気のあるブラウザは、-moz(Molilla Firefox) または -webit(Safari/Webkit) プレフィックスを使用しない限り、まだサポートされていません。

1

nav ul { list-style:none; margin:20px; 0 0 0; テキスト-インデント:0; } #nav li { パディング: 0; マージン: 0;装飾:なし; カラー:#000; ボーダー-ボトム: 1px; テキスト-整列: 右; } #nav li a::after { コンテンツ:#aaa;表示:インライン; フロート:右; マージン:0 2px 0 5px; } #nav li a:hover, #nav li a:focus { 背景:#f8f8f8; hover::after { margin:0 0 0 7px; color:#f93; } #nav li a:active {padding:8px 7px 6px 7px; } の角が丸いことに注意してください#中心。 CSS3 では、丸い角の半径を設定する border-radius プロパティが必要です (CSS3 ツアー: border-radius (丸い角) – Sugar with Tomatoes を参照してください)。現在の

互換性に関するメモ

ご想像のとおり、問題を引き起こすブラウザは IE だけです。
#floater は幅を指定する必要があります。指定しないと、IE のどのバージョンでも何も行われません

IE 6 のディレクトリは、周囲にスペースが多すぎるために中断されます

IE 8 には余分なスペースがあります (作者が見逃した)

その他のアイデア
ありWeb ページを中央に配置すると、興味深いことがたくさんできます。私は SWFObject Generator 2.0 を再設計するときにこのアイデアを使用しました (SWFObject2.0 を使用してコードを生成しました)。ここで別の考えがあります。

情報
以下は、私が参照し、読むことをお勧めするいくつかの情報です。

vertical-align を理解する、または「コンテンツを垂直方向に中央揃えにする方法 (しない)」
CSS を使用した垂直方向の中央揃え

CSS での垂直方向の中央揃え

TangbanTomato 氏は次のように述べています:

水平方向の中央揃えはよく使用されますが、垂直方向の中央揃えも非常に便利です。私が最も頻繁に使用する方法は、ちょっとした裏技と考えられている方法 5 です。

Almighty Programmer Exchange QQ Group 290551701. グループのプログラマーは全員、Baidu、Alibaba、JD.com、Xiaomi、Qunar、Are You Hungry、Linekong などの上級プログラマーであり、豊富な経験を持っています。ダイレクトコミュニケーションテクノロジーの達人、最高の学習環境である私たちに参加して、業界の生の情報を学びましょう。偉い人と友達になりたいなら、参加して偉い人たちにあなたを次のレベルに連れて行ってもらいましょう!