div を垂直方向に中央揃えするためのいくつかの方法

著者：Eve Cole 更新時間：2013-03-25 17:35:46

この問題について話すと、CSS には垂直方向の中央揃えを設定するvertical-align 属性があるのではないかと疑問に思う人もいるかもしれません。一部のブラウザがサポートしていない場合でも、CSSを少し行うだけで済みます

ハック技術だけで十分！したがって、ここで少し述べなければなりません。CSS には確かにvertical-align 属性がありますが、それは (X) HTML 要素の valign 属性を持つ要素に対してのみ発生します。

テーブル要素内の <td>、<th>、<caption> などは有効です。 <div> や <span> などの要素には valign 機能がないため、vertical-align は使用できません。

効果。

関連チュートリアル: div を水平方向に中央揃えにする N 方法

1. 単一行の垂直方向のセンタリング

コンテナ内にテキストが 1 行しかない場合、テキストを中央に配置するのは比較的簡単です。実際の高さを行の高さと同じに設定するだけです。

のように：

ディビジョン {
高さ:25ピクセル;
行の高さ:25px;
オーバーフロー:非表示;
}
このコードは非常に単純です。overflow:hidden 設定は、コンテンツがコンテナーを超えたり、自動行折り返しが発生したりするのを防ぐために後で使用され、垂直方向のセンタリング効果が得られません。もっとCSSを教える

手順。

2. 高さが不明な複数行のテキストの垂直方向の中央揃え

コンテンツの高さが可変の場合は、前のセクションで説明した水平方向の中央揃えを実現するために使用した最後の方法を使用できます。これは、上部と下部が一致するように Padding を設定することです。

パディング値は同じにすることができます。繰り返しますが、これは垂直方向の中央揃えを「見せる」方法であり、テキストを <div> 内に完全に埋める方法にすぎません。次のようなものを使用できます

次のコード:

ディビジョン {
パディング:25ピクセル;
}
このメソッドの利点は、どのブラウザでも実行でき、コードが非常にシンプルであることですが、このメソッドの前提条件は、コンテナーの高さがスケーラブルである必要があることです。

</body>
</html>
3. 複数行のテキストを高さを固定して中央揃えにする

この記事の冒頭で、CSS のvertical-align 属性は valign 属性を持つ (X)HTML タグでのみ機能すると述べましたが、CSS にも表示があります。

この属性は <table> をシミュレートできるため、この属性を使用して <div> に <table> をシミュレートさせ、vertical-align を使用できます。「display:table」と「

display:table-cell の使用方法。前者は親要素に設定し、後者は子要素に設定する必要があるため、配置する必要があるテキストに別の <div> 要素を追加する必要があります。

div#wrap {
高さ:400ピクセル;
表示:テーブル;
}
div#content {
垂直配置:中央;
表示:テーブルセル;
ボーダー:1px ソリッド #FF0099;
背景色:#FFCCFF;
幅:760ピクセル;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<頭>
<title> 複数行テキストの垂直方向の中央揃え</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
本文 {font-size:12px;font-family:tahoma;}
div#wrap {
高さ:400ピクセル;
表示:テーブル;
}
div#content {
垂直配置:中央;
表示:テーブルセル;
ボーダー:1px ソリッド #FF0099;
背景色:#FFCCFF;
幅:760ピクセル;
}
</スタイル>
</head>
<本文>
<div id="ラップ">
<div id="content"><pre>次に、このテキストを垂直方向の中央に配置したいと思います。 Webjx.Com
div#wrap {
高さ:400ピクセル;
表示:テーブル;
}
div#content {
垂直配置:中央;
表示:テーブルセル;
ボーダー:1px ソリッド #FF0099;
背景色:#FFCCFF;
幅:760ピクセル;
}
</pre></div>
</div>
</body>
</html>
この方法は理想的ですが、残念ながら Internet Explorer 6 は display:table と display:table-cell を正しく理解できないため、この方法が使用されます。

Internet Explorer 6以下では無効です。まあ、それは憂鬱です！ただし、他の方法もあります。 4. Internet Explorer での解決策。

Internet Explorer 6 以前では、高さの計算に欠陥があります。 Internet Explorer 6 で親要素を配置した後、子要素を配置すると、

パーセンテージ計算を行う際、計算基準が引き継がれるようです（位置決めされた値が絶対値の場合は問題ありませんが、パーセンテージ計算の基準が要素の基準ではなくなります）

親要素から継承された位置決めの高さの代わりに高さ)。たとえば、次の (X)HTML コードスニペットがあります。

<div id="ラップ">
<div id="サブラップ">
<div id="コンテンツ">
</div>
</div>
</div>
サブラップで絶対配置を実行すると、コンテンツがさらに配置されると、ページ上にすぐには表示されませんが、コンテンツもこの属性を継承します。

行が相互に相対的に配置されている場合、使用する 100% の比率はコンテンツの元の高さではなくなります。たとえば、サブラップ位置を 40% に設定すると、コンテンツを

エッジがラップと重なっている場合は、top:-80% を設定する必要があります。サブラップの top:50% を設定した場合は、コンテンツを元の位置に戻すために 100% を使用する必要があります。

, しかし、コンテンツも 50% に設定したらどうなるでしょうか?そうすれば、正確に垂直方向の中央に配置されます。したがって、この方法を使用して、Internet Explorer 6 で垂直方向の中央揃えを実現できます。

div#wrap {
ボーダー:1px ソリッド #FF0099;
背景色:#FFCCFF;
幅:760ピクセル;
高さ:400ピクセル;
位置:相対;
}
div#サブラップ {
位置:絶対;
ボーダー:1px ソリッド #000;
トップ:50%;
}
div#content {
ボーダー:1px ソリッド #000;
位置:相対;
トップ:-50%;
}
もちろん、このコードは Internet Exlporer 6 などのコンピューティングの問題があるブラウザーでのみ機能します。（でも、わかりません。たくさんの記事をチェックしましたが、それが原因かどうかはわかりません）

これらは同じですか? それとも何らかの理由で、多くの人が Internet Explporer 6 のこのバグの原理を説明したくないようです。私は表面的な理解しかできていないので、さらに勉強する必要があります)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<頭>
<title> 複数行テキストの垂直方向の中央揃え</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
本文 {font-size:12px;font-family:tahoma;}
div#wrap {
ボーダー:1px ソリッド #FF0099;
背景色:#FFCCFF;
幅:760ピクセル;
高さ:400ピクセル;
位置:相対;
}
div#サブラップ {
位置:絶対;
トップ:50%;
}
div#content {
位置:相対;
トップ:-50%;
}
</スタイル>
</head>
<本文>
<div id="ラップ">
<div id="サブラップ">
<div id="content"><pre>次に、このテキストを垂直方向の中央に配置したいと思います。
div#wrap {
ボーダー:1px ソリッド #FF0099;
背景色:#FFCCFF;
幅:760ピクセル;
高さ:500ピクセル;
位置:相対;
}
div#subwrap {
位置:絶対;
ボーダー:1px ソリッド #000;
トップ:50%;
}
div#content {
ボーダー:1px ソリッド #000;
位置:相対;
トップ:-50%;
}</pre>
</div>
</div>
</div>
</body>
</html>
5. 完璧なソリューション

次に、上記 2 つの方法を組み合わせて完璧な解決策を得ることができますが、これには CSS ハックの知識が必要です。 CSS Hack を使用してブラウザを区別するには、次のことができます。

この記事「簡単な CSS ハック: IE6、IE7、IE8、Firefox、Opera を区別する」を参照してください。

div#wrap {
表示:テーブル;
ボーダー:1px ソリッド #FF0099;
背景色:#FFCCFF;
幅:760ピクセル;
高さ:400ピクセル;
_位置:相対;
オーバーフロー:非表示;
}
div#サブラップ {
垂直配置:中央;
表示:テーブルセル;
_位置:絶対;
_トップ:50%;
}
div#content {
_位置:相対;
_トップ:-50%;
}
この時点で、完璧なセンタリングソリューションが作成されます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<頭>
<title> 複数行テキストの垂直方向の中央揃え</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
本文 {font-size:12px;font-family:tahoma;}
div#wrap {
表示:テーブル;
ボーダー:1px ソリッド #FF0099;
背景色:#FFCCFF;
幅:760ピクセル;
高さ:400ピクセル;
_位置:相対;
オーバーフロー:非表示;
}
div#サブラップ {
垂直配置:中央;
表示:テーブルセル;
_位置:絶対;
_トップ:50%;
}
div#content {
_位置:相対;
_トップ:-50%;
}
</スタイル>
</head>
<本文>
<div id="ラップ">
<div id="サブラップ">
<div id="content"><pre>次に、このテキストを垂直方向の中央に配置したいと思います。
div#wrap {
ボーダー:1px ソリッド #FF0099;
背景色:#FFCCFF;
幅:760ピクセル;
高さ:500ピクセル;
位置:相対;
}
div#サブラップ {
位置:絶対;
ボーダー:1px ソリッド #000;
トップ:50%;
}
div#content {
ボーダー:1px ソリッド #000;
位置:相対;
トップ:-50%;
}</pre>
</div>
</div>
</div>
</body>
</html>
ps 垂直方向のセンタリングvertical-alignの値はmiddle、水平方向のセンタリング alignの値はcenterです。両方ともセンタリングですが、キーワードが異なります。