ホームページ > 記事 > ウェブフロントエンド > CSS で DIV の垂直方向のセンタリングを設定する N つの方法（IE ブラウザと互換性あり）
CSS で DIV の垂直方向のセンタリングを設定する N つの方法（IE ブラウザと互換性あり）
- WBOYオリジナル
- 2016-07-06 13:28:191326ブラウズ
この問題について話すとき、CSS には垂直方向の中央揃えを設定するvertical-align 属性はないのかと疑問に思う人もいるかもしれません。一部のブラウザがサポートしていない場合でも、CSS Hack 技術を少し行うだけで済みます。ここで少し言っておきますが、CSS には確かにvertical-align 属性がありますが、これは (X)HTML 要素の valign 属性を持つ要素 (table 要素の b6c5a531a458a2e790c1fd6421739d1c など) にのみ有効です。 dc6dce4a544fdca2df29d5ac0ea9906b、63bd76834ec05ac1f4c0ebbeaafb0994 などの要素には valign 属性がないため、vertical-align は機能しません。
ヒント: 完璧な解決策は記事の最後にあります。
1. 単一行の垂直方向の中央揃え
コンテナ内にテキストが 1 行しかない場合、テキストを中央に配置するのは比較的簡単です。実際の高さを行の高さと同じに設定するだけです。
このコードは非常に単純で、overflow:hidden 設定は、コンテンツがコンテナーを超えたり、自動行折り返しが発生したりしないようにするために後で使用され、垂直方向のセンタリング効果が得られません。
2. 高さが不明な複数行のテキストの垂直方向の中央揃え
コンテンツの高さが可変の場合、前のセクションで説明した最後の方法を使用して、水平方向のセンタリングを実現できます。これは、上部と下部のパディング値が同じになるようにパディングを設定することです。繰り返しますが、これは垂直方向の中央揃えを「見せる」方法であり、テキストを dc6dce4a544fdca2df29d5ac0ea9906b 内に完全に埋める方法にすぎません。次のようなコードを使用できます:
このメソッドの利点は、どのブラウザでも実行でき、コードが非常にシンプルであることですが、このメソッドを適用するための前提条件は、コンテナの高さがスケーラブルである必要があることです。
3. 複数行テキストの固定高さ中央揃え
この記事の冒頭で、CSS のvertical-align 属性は valign 属性を持つ (X)HTML タグでのみ機能すると言いましたが、CSS には f5d188ed2c074f8b944552db028f98a1 をシミュレートできる display 属性もありますので、この属性を使用すると、vertical-align を使用して dc6dce4a544fdca2df29d5ac0ea9906b をシミュレートできます。 display:table と display:table-cell を使用する場合、前者は親要素に設定する必要があり、後者は子要素に設定する必要があるため、テキストに別の dc6dce4a544fdca2df29d5ac0ea9906b 要素を追加する必要があることに注意してください。配置する必要があります:
この方法が理想的なはずですが、残念ながらInternet Explorer 6はdisplay:tableとdisplay:table-cellを正しく理解できないため、この方法はInternet Explorer 6以下では無効です。まあ、それは憂鬱です！しかし、私たちには他の選択肢もあります。
4. Internet Explorer での解決策
Internet Explorer 6 以下では、高さの計算に不備があります。 Internet Explorer 6で親要素を配置した後、子要素に対してパーセント計算を行うと計算根拠が引き継がれるようです（位置決め値が絶対値であればそのような問題はありませんが、パーセント計算基準を使用するとこれは要素の高さではなく、親要素から継承された配置の高さになります)。
たとえば、次の (X)HTML コード スニペットがあります:
サブラップを絶対に配置すると、コンテンツもこの属性を継承しますが、ページ上にすぐには表示されませんが、その後コンテンツを相対的に配置すると、使用した 100% の比率が元の高さではなくなります。内容の。たとえば、サブラップの位置を 40% に設定した場合、コンテンツの上端をラップと一致させたい場合は、top:-80% を設定する必要があります。 、コンテンツを元の位置に戻すには 100% を使用する必要がありますが、コンテンツも 50% に設定するとどうなるでしょうか。そうすれば、正確に垂直方向の中央に配置されます。したがって、この方法を使用して Internet Explorer 6 で垂直方向の中央揃えを実現できます。
もちろん、このコードは Internet Exlporer 6 などのコンピューティングの問題があるブラウザでのみ機能します。 （でも、わかりません。たくさんの記事を調べました。ソースが同じだからなのか、何らかの理由でそうなったのかはわかりません。インターネット上では、このバグの原理を説明したくない人が多いようです） Exlorer 6. 表面的にしか理解していません。さらに勉強する必要があります)
五、完美的解决方案
那么我们综合上面两种方法就可以得到一个完美的解决方案，不过这要用到CSS hack的知识。
div#wrap {
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
div#subwrap {
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content {
_position:relative;
_top:-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">
<head>
<title> 多行文字实现垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div#wrap {
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
div#subwrap {
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content {
_position:relative;
_top:-50%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="subwrap">
<div id="content"><br /> <pre class="brush:php;toolbar:false">现在我们要使这段文字垂直居中显示！
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:500px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}<br />