ホームページ > 記事 > ウェブフロントエンド > 幅と高さの可変垂直センタリング解析_html/css_WEB-ITnose
幅と高さの可変垂直センタリング解析_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:43:191076ブラウズ
昨日、モバイルプロジェクトに取り組んでいたときに、次のようなケースに遭遇しました。画像に示されているように、画像コンテナはビューポートの幅に応じて自由に伸縮し、画像の幅と高さが変化します。垂直方向の中央揃え:
このレイアウトを作成していたとき、同じノードでposition:absoluteを使用すると、中央揃えを実現するためにdisplay:table-cellからvertical-align:middleを使用することを常に考えていました。失敗します。
最終的に思いつく解決策は以下の通り、幅と高さが可変の垂直方向のセンタリングです:
<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0"> <style type="text/css"> p{margin:0;padding:0} .wrap,.wrap1{ width:30%; padding-top:30%; background:#eee; position:relative; } .wrap p,.wrap1 p{ position:absolute; top:0; left:0; width:100%; height:100%; } .wrap p img{ max-width:100%; max-height:100%; position:absolute; top:50%; left:50%; -webkit-transform-origin:50% 50%; -webkit-transform:translate3d(-50%,-50%,0); } .wrap1 p{text-align:center;font-size:0;} .wrap1 p:after{ width:0; height:100%; display:inline-block; vertical-align:middle; content:""; } .wrap1 p img{ display:inline-block; max-width:100%; max-height:100%; vertical-align:middle; margin:0 auto; } </style></head><body> <h2>第一种方案</h2> <div class="wrap"> <p> <img src="img/download.jpg" alt="" /> </p> </div> <h1>111</h1> <div class="wrap"> <p> <img src="img/download1.jpg" alt="" /> </p> </div> <h2>第二种方案</h2> <div class="wrap1"> <p> <img src="img/download.jpg" alt="" /> </p> </div> <h1>111</h1> <div class="wrap1"> <p> <img src="img/download1.jpg" alt="" /> </p> </div> <div id="demo"> <p>水平垂直居中的随意内容</p></div> </body></html>
3つの垂直方向のセンタリングソリューションをそれぞれ紹介します:
Chew itいくつかの過去からの古い知識ポイント:
1. 水平方向のセンタリングの知識点
text-align:center
水平方向のセンタリングについてはあまり紹介されていないかもしれません。すべての主流ブラウザは text-align 属性をサポートしており、値の中心を取るだけで済みます。 ;
2.vertical-align 知識ポイント
vertical-align适用于 inline level, inline-block level 及 table-cells 元素上
主要なブラウザはすべてvertical-align 属性をサポートしているため、この属性を使用して垂直方向の中央揃えを実現することをお勧めします;
1. display:table- を使用します。 cell;vertical-align:middle;高さの可変と垂直方向のセンタリングの例のデモ
<div id="demo"> <p>水平垂直居中的随意内容</p></div>#demo{ display:table; width:500px; margin:10px auto; background:#eee;}#demo p{ display:table-cell; height:100px; vertical-align:middle;} table も実装できるので、表示を table システムの値に設定することを考えるのは自然です。もちろん、この解決策には制限があります。IE8 より前のブラウザは、display のテーブル システム値をサポートしていないため、IE8 以降のブラウザと非 IE ブラウザでのみ効果を確認できます。display:table を使用します。 -cell;vertical-align:middle; 可変高さと垂直方向のセンタリングの例 DEMO
<div id="demo"> <p>水平垂直居中的随意内容</p></div>#demo{ height:100px; text-align:center;}#demo:after{ display:inline-block; width:0; height:100%; vertical-align:middle; content:'';}#demo p{ display:inline-block; vertical-align:middle;} 注意する必要があることが 1 つあります。上記のコードを参照すると、コンテンツ コンテナーの幅が p の場合、 100 % の場合、#demo:after が 1 行に詰め込まれます。これは、インライン要素の間隔によって引き起こされます。完全な互換性を維持したい場合は、font: 0 を設定します。疑似クラスの代わりにspanタグを使用します。完璧なソリューション：デモ
<div id="demo"> <p>这是一个终极实现的水平垂直居中实例</p> <!--[if lt IE 8]><span></span><![endif]--></div>#demo{ height:100px; text-align:center; font-size:0; //注意这里是去除文字间隔，放在内容宽度为100%时挤出换行}#demo:after,#demo span{ display:inline-block; *display:inline; *zoom:1; width:0; height:100%; vertical-align:middle;}#demo:after{ content:'';}#demo p{ display:inline-block; *display:inline; *zoom:1; vertical-align:middle; font-size:16px;} 幅と高さが可変の 2 つの div を使用して相互に埋め込みます。周辺の div は絶対、左:50%、上:50% で配置されます。このようにして、周辺 div の左上隅が水平方向と垂直方向の中央に配置されます。内部 div は相対的に配置されるため、自身の幅と高さを使用して周囲の div を拡張し、left:-50%、top:-50% (margin-left、margin-top も使用できます)つまり、値を使用して、内部 div の幾何学的中心が周辺 div の左上隅と一致するように、周辺 div の幅と高さを参照するのが原則です。これにより縦横の遊びを実現します。この原則は、水平方向と垂直方向のセンタリングを実現するためにtranslate(-50%,-50%)を使用するのと少し似ていますが、css1.0コードを使用しているため、IE6.0~IE11のChromeおよびFirefoxとの互換性が非常に高いです
データ参考： サイズ不明要素の水平方向と垂直方向の配置 http://demo.doyoe.com/css/alignment/