CSS スタイル設定可変高さテキスト垂直 center_html/css

CSS スタイル設定可変高さテキスト垂直 center_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:33:47

オリジナル

1477 人が閲覧しました

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>

ログイン後にコピー