CSS 垂直中央揃えメソッド_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS 垂直中央揃えメソッド_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:39:11

オリジナル

1144 人が閲覧しました

フロントエンド開発では、水平方向と垂直方向のセンタリングがより一般的に使用されます。早速本題に入り、垂直方向のセンタリングを実現するためのさまざまな方法の長所と短所を見てみましょう。

1. "line-height" と "height" を一致させるように設定します

この方法は非常に簡単で、単一の線の垂直方向の中央揃えを実現するためによく使用されます。要素の内容が単一行であり、その高さが固定されていることを確認するだけで済みます。その「line-height」を「height」と同じ値に設定するだけで問題ありません。ただし、この方法は単一行のテキスト要素にのみ適用できるため、複数行の要素には使用できません。

<div class="vertical">content</div>.vertical { height: 100px; line-height: 100px;/*值等于元素高度的值*/ }

ログイン後にコピー

利点:
すべてのブラウザに適しており、十分なスペースがない場合でもコンテンツが途切れることはありません。

短所:
テキストと画像への適用にのみ適しており、テキストが一行ではない場合、この方法は効果が非常に低く、気分が悪くなるほどです。
この方法は、ボタン、画像、単一行のテキストフィールドなどの小さな要素に非常に便利です。

2. top と margin-top の値に基づいてコンテナの絶対位置を設定します

このメソッドは、コンテナの絶対位置 (position:absolute) と位置の高さを設定します。 (top:50%)、margin-top は高さの半分です (margin-top:-height/2)。これは、この方法を使用して垂直方向のセンタリングを実現するには、要素の高さが固定されている必要があることを意味します。このように、要素に固定の高さを設定すると、「overflow:auto」を設定すると、要素のコンテンツがコンテナを超えると、要素はスクロールし、コンテンツの高さに適応しなくなります。

<div class="vertical">content</div>.vertical { height: 100px;/*元素的高度*/ position: absolute; top: 50%;/*元素的顶部边界离父元素的的位置是父元素高度的一半*/ margin-top: -50px;/*设置元素顶边负边距，大小为元素高度的一半*/ }

ログイン後にコピー

利点:
さまざまなブラウザで動作でき、構造はシンプルで明確で、追加のタグを追加する必要はありません

欠点:
デッド要素の高さが固定されているため、スペースが不足します。コンテンツがコンテナ時間のサイズを超えると、コンテンツが消えるか、スクロールバーが表示されます (要素が本文内にある場合、ユーザーがブラウザウィンドウを縮小しても本文のスクロールバーは表示されません)。

を実現するために、表示を「table」と「table-cell」に設定します。

テーブル効果をシミュレートするために使用される div、つまり、複数の

の「display」属性を設定します。「table」と「table-cell」を選択し、それらの「vertical-align」属性値を「middle」に設定します。

<div id="container">    <div id="content">this is content</div></div>#container { height: 300px; display: table;/*让元素以表格形式渲染*/ } #content { display:table-cell;/*让元素以表格的单元素格形式渲染*/ vertical-align: middle;/*使用元素的垂直对齐*/ }

ログイン後にコピー

利点:
このメソッドには、前の 2 つのメソッドのような高さの制限がなく、要素のコンテンツに応じて高さを動的に変更できるため、コンテンツが取得されません。十分なスペースがないため、スクロールバーが途切れたり、醜いものになったりします。

短所:
欠点は何ですか?この方法は最新のブラウザにのみ適しており、IE6 ～ 7 では適切に実行できません。また、構造は最初の 2 つよりも複雑です。
この方法は、最新のブラウザーでは非常に便利です。ただし、IE6-7ではdisplay:tableがサポートされていないため、IE6-7ではこのメソッドの互換性の問題を解決するには、divを追加してハックを使用する必要があります。解決策はメソッドです。

<div class="table"> 　　<div class="tableCell"> 　　　　<div class="content">content</div> 　　</div> </div>.table { height: 300px;/*高度值不能少*/ width: 300px;/*宽度值不能少*/ display: table; position: relative; float:left; } .tableCell { display: table-cell; vertical-align: middle; text-align: center; padding: 10px; *position: absolute; *top: 50%; *left: 50%; } .content { *position:relative; *top: -50%; *left: -50%; }

ログイン後にコピー

4. display:inline-block を使用し、別の要素の高さを使用して中央揃えを実現します

この方法は、display:inline-block を使用し、別の要素の高さを使用して中央揃えを実現します中央揃え

RREE

利点:
調整可能な高さ、シンプルでわかりやすい

欠点:
要素の親要素の高さを設定する必要があり、この高さは固定値またはパーセントの高さにすることができます。追加の値を追加する必要があります。タグは div#extra などの行ボックスとして扱われ、その高さを 100% に設定する必要があります。さらに、ie6-7 は display:inline-block をサポートしていないため、別のスタイルを記述する必要があります。

5. 上部と下部に同じパディング値を指定します

このメソッドは複数行のコンテンツを中央に配置するためのもので、コンテナの高さは可変です。メソッドは非常に簡単で、同じパディング値を指定するだけです。上部と下部。

<div id="parent"> 　　<div id="vertically_center"> 　　　　<p>I am vertically centered!</p> 　　</div> 　　<div id="extra"><!-- ie comment --></div> </div> <style type="text/css"> html, body{ height: 100%; } #parent { height: 500px;/*定义高度，让线盒型div#extra有一个参照物，可以是固定值，也可以是百分比*/ border: 1px solid red; } #vertically_center, #extra { display: inline-block;/*把元素转为行内块显示*/ vertical-align: middle;/*垂直居中*/ } #extra { height: 100%; /*设置线盒型为父元素的100%高度*/ } </style> <!--[if lt IE 8]> <style type="text/css"> /*IE6-7不支持display:inline-block，所以在ie6-7另外写一个hack，用来支持ie6-7*/ #vertically_center, #extra { display: inline; zoom: 1; } #extra { width: 1px; } </style> <![endif]-->

ログイン後にコピー

長所:
すべてのブラウザで正常に動作し、すべての要素をサポートし、シンプルで理解しやすく、構造が明確です

短所:
このメソッドを使用するとコンテナの高さを固定できません、高さが固定されている場合、効果は達成されないでしょう。

6. 親コンテナの設定表示: flex;

<div class="columns">     <div class="item">test</div> </div>.item {padding-top:30px;padding-bottom:30px;}

ログイン後にコピー

利点:
子要素は幅と高さを設定する必要がなく、水平方向と垂直方向の中央に配置できるため、モバイル端末に適しています。

短所:
多くのブラウザは互換性がありません。最新バージョンの IE のみがサポートされており、他のブラウザにはプレフィックスを付ける必要があります。