ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS スタイル設定 可変高さテキスト垂直 center_html/css_WEB-ITnose
CSS スタイル設定 可変高さテキスト垂直 center_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:33:471536ブラウズ
display:table をサポートするブラウザでは、CSS を使用してテキストを垂直方向に中央揃えにするのは比較的簡単です。必要なのは、外側の div を table に設定し、内側の div を table-cell に設定して、テキストを垂直方向の中央揃えに設定するだけです。 。ただし、IE6/7 では、display:table はサポートされていないため、位置決めを使用してのみ処理できます。外側の div は配置され、中間の div は外側のレイヤーに対して絶対相対的に配置され、上部は 50%、内側のスパンは相対的に配置され、上部は -50%、コンテンツはプラスまたはマイナス 50% の配置によって垂直方向の中央に配置されます。
関連するデモ コード (div1 の高さをどのように変更しても、コンテンツが垂直方向の中央に配置され、コンテンツの行数に制限がないことを確認できます):
<!DOCTYPE HTML><html><head><title>ie中垂直居中</title><meta charset=UTF-8"><style type="text/css">.div1{ width:300px; position:absolute; border:1px solid #000; top:100px; left:200px; display:table;}.div2{ display:table-cell; vertical-align:middle; *position:absolute; *top:50%;}span{ *position:relative; *top:-50%;}</style></head><body><div class="div1" style="height:200px"> <div class="div2"> <span>IE6/7使用定位关系来垂直居中，IE8/9使用display:table和display:table-cell</span> </div></div></body></html>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。