HTMLの水平垂直中心問題についての議論

10075 ワード
html ブラウザ css chrome firefox
HTMLの水平垂直中央問題については、ネット上での議論がかなり多くなっています.ここで、私はネット上で検索した結果を、問題を解く構想を添付して、まとめて、みんなに役に立つことを望んでいます.
まず、誰が誰に対して水平に垂直に中央に位置し、対応するスタイルが誰の中に書くべきかを明確にする必要があります.ここでは、outer elementに対してinner elementが水平垂直に中央に位置していると総称します.次にまず最初に述べるのはdivの中で文字が真ん中で、これはこの範疇に属しません.文字を盛るdivが他のdiv(outer div)に置かれ、文字divが全体的にこの層に対して中央に位置しているので、これが私たちが議論する話題です.このとき,文字を盛る層がinner elementであり,その層に対して中央に位置する要素がouter elementである.
まず、ある文字をdivの水平方向と垂直方向の中間に置く方法を見てみましょう.次に、状況を分けて議論します.
        1. 1行テキスト
1 divの高さ表示指定;②divの高さは指定されていません.②,文字のフォントサイズがdivの高さを決定する場合については議論する必要はない.①の場合は、line-heightの値をheightの値と一致させるだけです.幅については、指定せずに何字書けば幅が広く、幅を指定し、text-alignをcenterに設定すればよい.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style>
  div {
    /*      div    ，   div      */
    border: 1px solid black;
    width: 400px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 12px;
  }
</style>

<div>            。</div>

        2. マルチテキスト(divの高さ不明)
この場合,divの高さは文字の多少によって変化する.padding値を設定するだけで、paddingがどれだけ必要かを見て、勝手にします.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style>
  div {
    /*      div    ，   div      */
    border: 1px solid black;
    width: 400px;
    font-size: 12px;
    padding: 20px;
  }
</style>

<div>&nbsp;&nbsp;&nbsp;&nbsp;      ，                       padding         。   ，      "   "        ，          div            。</div>

        3. マルチテキスト(divの高さ指定、すなわち固定高さのdiv)
CSSのvertical-alignプロパティはvalignプロパティを持つ(X)HTMLラベルにのみ機能しますが、CSSにはをシミュレートできるdisplayプロパティがもう一つあるので、このプロパティを使用して
シミュレート
でvertical-alignを使用することができます.注意、display:tableとdisplay:table-cellの使用方法は、前者は親要素に設定する必要があり、後者は子要素に設定する必要があるため、位置決めが必要なテキストに
要素を追加します.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style>
  div.outer {
    /*      div    ，   div      */
    border: 1px solid black;
    width: 400px;
    height: 300px;
    overflow: auto;
    font-size: 12px;
    display: table;
  }
  
  div.inner {
    display: table-cell;
    vertical-align: middle;
    padding: 20px;
  }
</style>

<div class="outer">
  <div class="inner">
    &nbsp;&nbsp;&nbsp;&nbsp;CSS    vertical-align         valign     (X)HTML      ，    CSS       display        table，               div    table       vertical-align 。  ，display:table   display:table-cell      ，           ，           ，                   div   。
  </div>
</div>

この方法は理想的であるべきであるが、残念ながら、display:tableとdisplay:table-cellを正しく理解できるのは、標準ブラウザ(FF,Opera,Safari,IE 8など)のみであるため、W 3 C標準をサポートしていないブラウザ(IE 6とIE 7)では無効である.うん、これはうっとうしい!しかし、私たちは他の方法があります.
W 3 C規格に対応していないIEブラウザでは,高度な計算に欠陥がある.親エレメントを配置した後、子エレメントに対してパーセンテージ計算を行った場合、計算のベースは継承されているようです(配置された数値が絶対値の場合は問題ありませんが、パーセンテージ計算のベースはそのエレメントの高さではなく、親エレメントから継承された配置の高さになります).たとえば、次のような(X)HTMLコードセグメントがあります.

<div id="outer"> 
 <div id="inner"> 
   <div id="content"></div> 
  </div>
</div>

現在、outerレイヤは私たちの大きなコンテナであり、Firefox、Chromeなどの現代ブラウザでは、2つのレイヤ(周辺のコンテナレイヤを含む)を使用し、displayとvertical-alignプロパティを使用して垂直に中央に位置することができます.ここで、IE 6及びIE 7は、3つの層(周辺の容器層を含む)を必要とする.outerレイヤの幅の高さは既知であり、contentレイヤの高さは未知である.contentレイヤがどれだけの文字を書くか分からないため、contentレイヤを導入し、contentレイヤを包み、contentレイヤにどれだけの文字があるか、innerレイヤの高さはcontentレイヤの高さと同じである(これはそれぞれのpositionの設定にも依存する).いずれも文字の高さです.しかし、inner層とcontent層の高さは未知であることを覚えておいてください.Innerレイヤのpositionをabsolute(relativeの場合、innerレイヤの幅はouterレイヤの幅を継承します.これは私たちが望んでいる効果ではありません.私たちが望んでいる効果はcontentレイヤと一致する幅の高さです)、topは50%です.では、Inner層の左上隅はouter層の垂直方向の真ん中に位置する(50%はouter層の高さに基づいて計算され、計算の基礎は父要素の高さである).この場合,content層の位置をcontentまたはinner層の高さの半分だけ上にずらすだけでよい.残念ながら、私たちはそれらの高さを知らない.これが私たちが3つの層を導入する理由です.Innner層のpositionがabsoluteであるため、content層のpositionもabsoluteである場合、inner層は高幅ではなく、content層のpostionをrelativeにするしかなく、inner層とcontent層は同じ高幅になる.contentレイヤにtopを-50%に設定すると、outerレイヤの高さで計算されます.これで私たちの目的を達成しました.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style>
  div.outer {
    border: 1px solid black;
    width: 600px;
    height: 400px;
    font-size: 12px;
    /*    position: absolute; */
    position: relative;
  }
  
  div.inner {
    /*     */
    position: absolute;
    top: 50%;
  }
  
  div.content {
    /*     */
  	position: relative;
  	top: -50%;
  }
</style>

<div class="outer"> 
 <div class="inner"> 
   <div class="content">
     &nbsp;&nbsp;&nbsp;&nbsp;  ，outer          ，  Firefox，Chrome        ，     (        )，    display   vertical-align         。  ，IE6   IE7      (        )。outer        ，content       ，        content        ，        inner  ，   content      ，  ，content        ，  ，inner        content       (          position    )，         。  ，       ，inner    content         。    inner    position   absolute(   relative，   inner         outer     ，          ，         content        )，top   50%，  ，inner         outer           (50%     outer         ，              )。    ，       content          content   inner          。  ，           。                  。   innner    position   absolute，   content    position    absolute，   inner        ，      content    postion   relative，    ，inner    content           。  content      top   -50%，       outer         。           。
   </div>
  </div>
</div>

IE 6とIE 7については、W 3 C規格をサポートするブラウザ(Firefox,Chrome)も3つのレイヤを使用して中央の効果を実現しなければならない.CSS Hackを使用して、これらのブラウザを互換化するしかありません.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style>
  div.outer {
    border: 1px solid black;
    width: 600px;
    height: 400px;
    font-size: 12px;
    /*    position: absolute; */
    _position: relative;
    
    display: table;
  }
  
  div.inner {
    /*     */
    _position: absolute;
    _top: 50%;
    
  	display: table-cell;
  	vertical-align: middle;
  }
  
  div.content {
    /*     */
  	_position: relative;
  	_top: -50%;
  }
</style>

<div class="outer"> 
 <div class="inner"> 
   <div class="content">
     &nbsp;&nbsp;&nbsp;&nbsp;     IE6   IE7，          W3C       (Firefox, Chrome)              。        CSS Hack            。
   </div>
  </div>
</div>

文字がdivの真ん中にある問題はもう議論が終わりました.今、文字を盛る層をinner elementと見なします.私たちは今、文字層をこのページの真ん中に配置します.この時、bodyは私たちのouter elementです.
この場合,inner elementの幅が既知であるため(実際には,文字を盛るdivの高さが設定されているだけで,文字がどれだけあるのか,それとも知らないのか),まずinner elementの左上隅をouter elementの正中心に位置させる.この場合、inner elementのpositionをabsoluteに設定し、topとleftが50%になるようにする必要があります.さらにmargin-topを-height/2、margin-leftを-width/2に設定します.これで、私たちが望んでいる効果に達しました.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
  <head>
    <style>
      html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
      
      div.outer {
        /*        inner element    ，     inner element       ，1px */
        border: 1px solid black;
        width: 600px;
        height: 400px;
        font-size: 12px;
        position: absolute;
        top: 50%;
        left: 50%;
        /* margin-left = -width/2 = -600/2 - -300 */
        margin-left: -300px;
        /* margin-top = -height/2 = -400/2 = -200 */
        margin-top: -200px;
        
        display: table;
      }
      
      div.inner {
        /*     */
        _position: absolute;
        _top: 50%;
        
        display: table-cell;
        vertical-align: middle;
        /*      */
        text-align: center;
      }
      
      div.content {
        /*     */
        _position: relative;
        _top: -50%;
      }
    </style>
  </head>
  
  <body>
    <div class="outer"> 
      <div class="inner"> 
        <div class="content">
          &nbsp;&nbsp;&nbsp;&nbsp;      ，               ！     ，  IE6   IE7           ，                 ，   ，             ，          bug    。
        </div>
      </div>
    </div>
  </body>
</html>

実際,上記margin−leftとmargin−topを計算する方法は正確ではない.margin-leftを例にとると、正確な計算方法は-(border-left+padding-left+width+padding-right+border-right)/2である.実際の操作では,数画素の差は無視でき,視覚的には中央と考えればよい.paddingやborder設定の値が大きい場合は、正確なアルゴリズムを考慮する必要があります.
JavaScriptベリファイア
Stellarでjs視差スクロール効果の作成