CSSは垂直中心の4つの考え方を実現する

23112 ワード

×
ディレクトリ[1]line-height[2]vertical-align[3]absolute[4]flex
前の話
水平中心に比べて垂直中心にはやや困っているが,vertical−alignが正しく使用できないためが大部分である.実際,垂直中心を実現することもいくつかの考え方をめぐって展開されている.本稿では,垂直中心に関する4つの考え方を紹介する

構想1:行高line-heightは単行テキストの垂直中央を実現する
行の中には、1行のテキストが垂直に中央になるように高さと行の高さを同じ値に設定するという説がありますが、高さは設定する必要はありません.実際には、テキスト自体が1行の中央に表示されます.高さを設定しない場合、行の高さは高さを広げます

<style>
.test{
    line-height: 50px;
    background-color: lightblue;
}    
</style>

<div class="test">    </div>

構想2:vertical-align:middleを設定して垂直中央を実現する
【1】親要素のディスプレイをtable-cellに設定
table-cell要素にvertical-align:middleを設定することで、サブ要素を垂直に中央に配置できます.これは表のセルの垂直方向の中央にあるのと似ています.
[注]IE 7-ブラウザでサポートする場合は、テーブル構造に変更できます.
[注意]table-cellに設定されたdivでは、フローティングまたは絶対位置決めは使用できません.フローティングまたは絶対位置決めは、要素にブロックレベルの要素特性を持たせ、table-cell要素が持つ垂直位置合わせの機能を失うためです.フローティングまたは絶対位置決め処理が必要な場合は、外部にdivを追加する必要があります.

<style>
.parent{
  display: table-cell;
  vertical-align: middle;
}
</style>

<div class="parent" style="background-color: gray;height: 100px;">
    <div class="child" style="background-color: lightblue;">                      </div>   
</div>

【2】サブエレメントがピクチャの場合、親エレメントの行の高さを設定することで高さの代わりに、親エレメントのfont-sizeを0に設定します.
vertical-align:middleの解釈は、要素の中垂点と親要素のベースラインに1/2の親要素のアルファベットXを加えた高さの位置合わせである.文字Xは、emボックスにおいて垂直に中央に位置しないため、各フォントの文字Xの高低位置が一致しない.したがって、フォントサイズが大きいと、この違いがより顕著になります.font-sizeが0の場合、文字Xのフォントサイズを0に設定することに相当し、完全な垂直中央を実現することができる

<style>
.parent{
  line-height: 100px;
  font-size: 0;
}
.child{
  vertical-align: middle;
}
</style>

<div class="parent" style="background-color: lightgray;width:200px;">
    <img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">  
</div>

【3】エレメントを追加することにより垂直中心の効果を実現
新しい要素は、高さを親高さ、幅を0に設定し、垂直方向に中央にvertical-align:middleのinline-block要素も設定します.2つの要素間の空白が解析されるため、親にfont-size:0を設定し、子にfont-sizeを所望の値に設定する必要があります.構造要件が厳しくない場合は、2つの要素を1行表示できます.font-size:0を設定する必要はありません.

<style>
.parent{
  height: 100px;
  font-size: 0;
}
.child{
  display: inline-block;
  font-size: 20px;
  vertical-align: middle;
}
.childSbling{
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
</style>

<div class="parent" style="background-color: lightgray; width:200px;">
  <div class="child" style="background-color: lightblue;">              </div>
  <i class="childSbling"></i> 
</div>

考え方3:絶対位置決めによる垂直中央
【1】translate()シフト関数の組み合わせ
translate関数のパーセンテージは自身に対して高いので、top:50%はtranslate Y(-50%)と合わせて中央効果を実現できます.
[注意]IE 9-ブラウザはサポートされていません
[注意]サブ要素の高さが既知である場合、translate()関数はmargin-top:負の高さ値に置き換えることもできます.

<style>
.parent{
  position:relative;
}
.child{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>

<div class="parent" style="background-color: lightgray; height:100px;">
  <div class="child" style="background-color: lightblue;">    </div>
</div>

【2】サブエレメントが高く設定されている場合は、絶対的に位置決めされたボックスモデルの属性を組み合わせて、中央効果を実現する

<style>
.parent{
  position: relative;
}
.child{
 position: absolute;
 top: 0;
 bottom: 0;
 margin: auto 0;
 height: 50px;
}
</style>

<div class="parent" style="background-color: lightgray; height:100px;">
  <div class="child" style="background-color: lightblue;">    </div>
</div>

水平方向の中央揃えでは、要素の外側にdivを1つセットしabsoluteを設定し、要素に負のmargin-leftまたはrelativeの負のleftプロパティを設定し、水平方向の中央揃えの効果を実現します.しかし、marginはブロック幅を含むことに対して、margin−top:−50%が高さの−50%ではなく幅を得るため、実行できない.relativeのパーセンテージ値の場合、ブロック高さautoを含む場合、chrome、safari、IE 8+ブラウザは設定要素のパーセンテージtop値をサポートしないため、実行できません.

構想4:フレキシブルボックスモデルflexを用いて垂直中央を実現する
[注意]IE 9-ブラウザはサポートされていません
【1】伸縮容器に側軸整列方式align-items:centerを設ける

<style>
.parent{
  display: flex;
  align-items: center;
}
</style>

<div class="parent" style="background-color: gray; height: 100px;">
    <div class="child" style="background-color: lightblue;">    </div>   
</div>

【2】伸縮項目にmargin:auto 0を設定する

<style>
.parent{
  display: flex;
}
.child{
  margin: auto 0;
}
</style>

<div class="parent" style="background-color: gray; height: 100px;">
    <div class="child" style="background-color: lightblue;">    </div>   
</div>

CSSが水平中央を実現する4つの考え方

IE下ブロック要素実装display:inline-block