css垂直中心のいくつかの方法
6084 ワード
親要素の高さが決定された単行テキスト
親要素の高さ決定の単行テキストの縦中央の方法は、親要素のheightとline-heightの高さが一致するように設定することによって実現されます.
htmlコード:
<div class="container">
hi,imooc!
</div>cssコード:
<style>
.container{ height:100px; line-height:100px; background:#999; }
</style>親要素の高さが決定された複数行のテキスト
親要素の高さを決定する複数行のテキスト、ピクチャ、ブロック要素の縦方向の中央に配置する方法には、次の2つがあります.
tableラベルの使用
垂直中心といえば、cssには垂直中心のプロパティvertical-alignがありますが、このスタイルは親要素がtdまたはthの場合にのみ有効です.だからまたtableラベルを挿入します.
tdラベルはデフォルトでvertical-alignがmiddleに設定されているので、明示的に設定する必要はありません.
htmlコード:
<body>
<table><tbody><tr><td class="wrap">
<div>
<p> 。</p>
<p> 。</p>
<p> 。</p>
<p> 。</p>
<p> 。</p>
</div>
</td></tr></tbody></table>
</body>cssコード:
table td{height:500px;background:#ccc}vertical-alignプロパティの使用
chrome、firefoxおよびIE 8以上のブラウザでは、ブロックレベル要素のdisplayをtable-cellに設定し、vertical-alignプロパティをアクティブにすることができますが、IE 6、7はこのスタイルをサポートしていないことに注意してください.
この方法の利点は,余計な無意味なラベルを追加する必要がないことであるが,欠点も明らかであり,互換性があまりよくなく,IE 6,7に互換性がないことである.
htmlコード:
<div class="container">
<div>
<p> 。</p>
<p> 。</p>
<p> 。</p>
<p> 。</p>
<p> 。</p>
</div>
</div>cssコード:
<style>
.container{ height:300px; background:#ccc; display:table-cell;/*IE8 Chrome、Firefox*/ vertical-align:middle;/*IE8 Chrome、Firefox*/ }
</style>