ホームページ > 記事 > ウェブフロントエンド > CSS チュートリアル: div を垂直方向に中央揃えする複数の方法

CSS チュートリアル: div を垂直方向に中央揃えする複数の方法

高洛峰オリジナル: 2017-03-13 17:50:421294ブラウズ

この記事では、主に CSS チュートリアルで p を垂直方向にセンタリングするさまざまな方法を詳しく紹介します。興味のある友人は参考にしてください。この問題について話すとき、次のように尋ねる人もいるかもしれません。 CSSに垂直方向の中央揃えを設定する

vertical-align

属性はありませんか？一部のブラウザがサポートしていない場合でも、CSS Hack 技術を少し行うだけで済みます。そこで、ここで少し言っておかなければなりません。CSS には確かにvertical-align 属性がありますが、それは table 要素内の (X)HTML 要素の valign 属性を持つ要素にのみ有効です。 b4d429308760b6c2d20d6300079ed38e、63bd76834ec05ac1f4c0ebbeaafb0994 など。e388a4556c0f65e1904146cc1a846bee、45a2772a6b6107b401db3c9b82c049c2 のような要素には valign 属性がないため、vertical-align は機能しません。

1. 単一行の垂直方向の中央揃え

コンテナー内にテキストが 1 行しかない場合、テキストを中央揃えにするのは比較的簡単です。実際の高さ

高さ

と行の高さを設定するだけです。 line-heightを等しくすることができます。例:

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

このコードは非常に単純です。overflow:hidden 設定は、コンテンツがコンテナーを超えたり、行を自動で折り返したりするのを防ぐために後で使用されます。これにより、垂直方向のセンタリング効果が得られません。

<!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;}   
 p {   
  height:25px;   
  line-height:25px;   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
 }   
  </style>
 </head>
 <body>
  <p>现在我们要使这段文字垂直居中显示！</p>
 </body>
</html>

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

コンテンツの高さが可変の場合は、前のセクションで説明した水平方向の中央揃え方法を使用できます。上限と下限のパディング値が同じになるように

Padding

を設定することです。繰り返しますが、これは垂直方向の中央揃えを「見せる」方法であり、テキストを e388a4556c0f65e1904146cc1a846bee 内に完全に埋める方法にすぎません。次のようなコードを使用できます:

p {      
 padding:25px;      
}

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

<!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;}   
 p {   
  padding:25px;   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
  width:760px;   
 }   
  </style>
 </head>
 <body>
  <p><pre class="brush:php;toolbar:false">现在我们要使这段文字垂直居中显示！   
   p {   
  padding:25px;   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
 }

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

この記事の冒頭で、CSS のvertical-align 属性は、次の (X)

HTML タグ

でのみ機能すると言いました。 valign 機能ですが、CSS には f5d188ed2c074f8b944552db028f98a1 をシミュレートできる display 属性もあるので、この属性を使用して e388a4556c0f65e1904146cc1a846bee に f5d188ed2c074f8b944552db028f98a1 をシミュレートさせてから、vertical-align を使用できます。 display:table と display:table-cell を使用する場合、前者は親要素に設定し、後者は子要素に設定する必要があるため、テキストに別の e388a4556c0f65e1904146cc1a846bee 要素を追加する必要があることに注意してください。 rrree

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

このメソッドは理想的ですが、残念ながら Internet Explorer 6 は display:table と display:table-cell を正しく理解できないため、このメソッドは Internet Explorer 6 以前では無効です。まあ、それは憂鬱です！しかし、他の方法もあります

4. Internet Explorer での解決策

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

<!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;}   
 p#wrap {   
  height:400px;   
  display:table;   
 }   
 p#content {   
  vertical-align:middle;   
  display:table-cell;   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
  width:760px;   
 }   
  </style>
 </head>
 <body>
 <p id="wrap">
  <p id="content"><pre class="brush:php;toolbar:false">现在我们要使这段文字垂直居中显示！ Webjx.Com    
 p#wrap {   
  height:400px;   
  display:table;   
 }   
 p#content {   
  vertical-align:middle;   
  display:table-cell;   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
  width:760px;   
 }

サブラップで

絶対位置決め

を実行すると、コンテンツもこの属性を継承しますが、ページにはすぐには表示されませんが、コンテンツを相対的に配置すると、使用する 100% 比率はコンテンツの元の高さではなくなります。たとえば、サブラップの position を 40% に設定する場合、コンテンツの上端をラップと一致させたい場合は、サブラップの上部を top:-80% に設定する必要があります。：50％その場合、コンテンツを元の位置に戻すには100％を使用する必要がありますが、コンテンツも50％に設定するとどうなりますか？そうすれば、正確に垂直方向の中央に配置されます。したがって、このメソッドを使用して Internet Explorer 6 で垂直方向の中央揃えを実現できます:

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

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

<!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;}   
 p#wrap {   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
  width:760px;   
  height:400px;   
  position:relative;   
 }   
 p#subwrap {   
  position:absolute;   
  top:50%;   
 }   
 p#content {   
  position:relative;   
  top:-50%;   
 }   
  </style>
 </head>
 <body>
 <p id="wrap">
  <p id="subwrap">
   <p id="content"><pre class="brush:php;toolbar:false">现在我们要使这段文字垂直居中显示！   
 p#wrap {   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
  width:760px;   
  height:500px;   
  position:relative;   
 }   
 p#subwrap {   
  position:absolute;   
  border:1px solid #000;   
  top:50%;   
 }   
 p#content {   
  border:1px solid #000;   
  position:relative;   
  top:-50%;   
 }

五、完美的解决方案

那么我们综合上面两种方法就可以得到一个完美的解决方案，不过这要用到CSS hack的知识。对于如果使用CSS Hack来区分浏览器，你可

以参考这篇“简单CSS hack：区分IE6、IE7、IE8、Firefox、Opera”：

p#wrap {      
    display:table;      
    border:1px solid #FF0099;      
 background-color:#FFCCFF;      
 width:760px;      
  height:400px;      
 _position:relative;      
   overflow:hidden;      
}      
p#subwrap {      
    vertical-align:middle;      
    display:table-cell;      
   _position:absolute;      
   _top:50%;      
}      
p#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;}   
 p#wrap {   
  display:table;   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
  width:760px;   
  height:400px;   
  _position:relative;   
  overflow:hidden;   
 }   
 p#subwrap {   
  vertical-align:middle;   
  display:table-cell;   
  _position:absolute;   
  _top:50%;   
 }   
 p#content {    
  _position:relative;   
  _top:-50%;   
 }   
  </style>
 </head>
 <body>
 <p id="wrap">
  <p id="subwrap">
   <p id="content"><pre class="brush:php;toolbar:false">现在我们要使这段文字垂直居中显示！   
 p#wrap {   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
  width:760px;   
  height:500px;   
  position:relative;   
 }   
 p#subwrap {   
  position:absolute;   
  border:1px solid #000;   
  top:50%;   
 }   
 p#content {   
  border:1px solid #000;   
  position:relative;   
  top:-50%;   
 }

以上就是本文的全部内容，希望对大家的学习有所帮助。

以上がCSS チュートリアル: div を垂直方向に中央揃えする複数の方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：DIV+CSS を共有してフローティングをクリアする一般的な方法のまとめ次の記事：DIV+CSS を共有してフローティングをクリアする一般的な方法のまとめ

続きを見る