ページレイアウト_html/css_WEB-ITnose で div の垂直方向の中央揃えを実現する CSS メソッドの概要

前回の記事では、「ページレイアウトで div を水平方向にセンタリングする CSS 方法」を簡単にまとめました。実は、水平方向のセンタリングは比較的簡単ですが、垂直方向のセンタリングはページをデザインするときに行うため、少し面倒です。多くの場合、横幅はすべて固定です。したがって、ページレイアウト時に垂直方向のセンタリングを実現する方法を要約する必要があります。

この問題について話すと、CSS には垂直方向の中央揃えを設定するvertical-align 属性はないのかと疑問に思う人もいるかもしれません。一部のブラウザがサポートしていない場合でも、CSS Hack 技術を少し行うだけで済みます。そこで、ここで少し言っておかなければなりません。確かに CSS にはvertical-align 属性がありますが、それは (X)HTML 要素内の valign 属性を持つ要素 (table 要素の

や < など) にのみ有効です。 ;th>、 など、および

、 などの要素には valign 属性がないため、vertical-align は機能しません。

1. 単一行の垂直方向の中央揃え
コンテナー内にテキストが 1 行しかない場合、実際の高さを行の高さと同じに設定するだけで比較的簡単です。例:

view plain copy to Clipboard print ?

div { height:25px; line-height:25px; }

div {        height:25px;        line-height:25px;        overflow:hidden; }

このコードを使用する目的は非常に簡単です。これは、コンテンツがコンテナーを超えたり、自動的にワードラップが発生したりして、垂直方向のセンタリング効果が得られないようにすることです。

ここをクリックして実行効果を確認してください
ただし、Internet Explorer 6 以前では、この方法は画像の垂直方向の中央揃えをサポートしていません。

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

コンテンツの高さが可変の場合、前のセクションで説明した水平方向の中央揃えを実現するために使用される最後の方法、つまり Padding を設定することができます。上部と下部のパディング値を同じにするだけです。繰り返しますが、これは垂直方向の中央揃えを「見せる」方法であり、テキストを

内に完全に埋める方法にすぎません。次のようなコードを使用できます:

view plain copy to Clipboard print ?

div {padding:25px; }

div {  padding:25px; }

このメソッドの利点は、どのブラウザでも実行できることです。非常に単純ですが、この方法を適用するための前提条件は、コンテナーの高さがスケーラブルである必要があることです。

実行中の効果を確認するにはここをクリックしてください

3. 複数行テキストの固定高さ中央揃え

この記事の冒頭で、CSS のvertical-align 属性は次の (X) HTML タグでのみ機能すると述べました。 valign 特性ですが、CSS には

をシミュレートできる表示属性もあるので、この属性を使用して

に

をシミュレートしてから、vertical-align を使用できます。 display:table と display:table-cell を使用する場合、前者は親要素に設定する必要があり、後者は子要素に設定する必要があるため、テキストに別の

要素を追加する必要があることに注意してください。配置する必要があります:
E

クリップボードにコピーして印刷しますか? Div#wrap {Height: 400px; Display: Table;} Div#Content {Vertical-Align: MIDDLE; Table-C-C border: 1px Solid #ff0099; background- color:#FFCCFF; width:760px; }

div#wrap {  height:400px;  display:table; } div#content {  vertical-align:middle;  display:table-cell;  border:1px solid #FF0099;  background-color:#FFCCFF;  width:760px; }

実行中の効果を確認するにはここをクリックしてください

この方法は理想的なはずですが、残念ながら Internet Explorer 6 は display:table と display:table- を正しく理解できません。したがって、このメソッドは Internet Explorer 6 以前では無効です。まあ、それは憂鬱です！しかし、私たちには他の選択肢もあります。 4. Internet Explorer での解決策

Internet Explorer 6 以前では、計算上の欠陥が多くあります。 Internet Explorer 6で親要素を配置した後、子要素に対してパーセント計算を行うと計算根拠が引き継がれるようです（位置決め値が絶対値であればそのような問題はありませんが、パーセント計算基準を使用するとこれは要素の高さではなく、親要素から継承された配置の高さになります)。たとえば、次の (X)HTML コード スニペットがあります:

view plain copy to Clipboard print ?

  

      

  

  

   lt;/div>  

<div id="wrap">  <div id="subwrap">   <div id="content">  </div> </div>
</div>

如果我们对subwrap进行了绝对定位，那么content也会继承了这个这个属性，虽然它不会在页面中马上显示出来，但是如果再对 content进行相对定位的时候，你使用的100%分比将不再是content原有的高度。例如，我们设定了subwrap的position为 40%，我们如果想使content的上边缘和wrap重合的话就必须设置top:-80%;那么，如果我们设定subwrap的top:50%的话，我 们必须使用100%才能使content回到原来的位置上去，但是如果我们把content也设置50%呢？那么它就正好垂直居中了。所以我们可以使用这 中方法来实现Internet Explorer 6中的垂直居中：

view plain copy to clipboard print ?

div#wrap {        border:1px solid #FF0099;    background-color:#FFCCFF;    width:760px;      height:400px;    position:relative;    }    div#subwrap {      position:absolute;        border:1px solid #000;         top:50%;    }    div#content {        border:1px solid #000;        position:relative;         top:-50%;    }  

div#wrap {  border:1px solid #FF0099;  background-color:#FFCCFF;  width:760px;  height:400px;  position:relative; } div#subwrap {  position:absolute;  border:1px solid #000;  top:50%; } div#content {  border:1px solid #000;  position:relative;  top:-50%; }

当然，这段代码只能在Internet Exlporer 6等计算存在问题的浏览器中才会有作用。（不过我不解，我查阅了很多文章，不知道是因为出处相同还是什么原因，似乎很多人都不愿意去解释Internet Exlporer 6中这这个Bug的原理，我也只是了解了一点皮毛，还要再研究）
点击此处查看运行效果

五、完美的解决方案
    那么我们综合上面两种方法就可以得到一个完美的解决方案，不过这要用到CSS hack的知识。对于如果使用CSS Hack来区分浏览器，你可以参考这篇“简单CSS hack：区分IE6、IE7、IE8、Firefox、Opera”：

view plain copy to clipboard print ?

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%;    }  

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%; }

至此，一个完美的居中方案就产生了。

点击此处查看最终运行效果

p.s. 垂直居中vertical-align的值是middle，而水平居中align的值是center，虽然同是居中但关键字不同。

参考文章：http://www.jakpsatweb.cz/css/css-vertical-center-solution.html