縦中心のコンテンツ

私は1つのdivとそれの中のテキストを持っています。私のコンテンツを水平方向と垂直方向の中心にするには、CSSを使用します。それはFirefoxでうまく動作しますが、IE6で次のコードをテストすると、コンテンツが垂直方向の中心にならない。縦中心のコンテンツ

私が追加する必要があるか、私のCSSで変更する必要があるか教えてください。

私のhtmlコードが

<html> 
<head> 
<title>Vertical Centering</title> 
<style> 
.content { 
    text-align: center; 
    display: table-cell; 
    vertical-align: middle; 
    background-color: green; 
    height: 200px; 
    width: 250px; 

} 
</style> 
</head> 
<body> 
<div class="content"> 
Hello. 
</div> 
</body> 
</html>

である、それはすべて同じになります私のCSSを見ていると、それはIEで動作していない理由も、結果として、このような方法で、私のCSSを修正してください教えてくださいブラウザ。ここで

おかげ

出典

2010-12-07 Thomas

HTMLを再投稿してください。 –

display：table-cell; IE8の下ではサポートされていません。 – easwee

を：http://jsbin.com/ovabo4/3

出典

2010-12-07 12:08:56 Sotiris

まずは、大いに助けてくれてありがとう。なぜあなたはトップを指定するのですか？45％なぜ他の数字ではないのですか？ plzz expain。 – Thomas

残りの10％（各上下の5％）がテキストの高さであるためです。 – Sotiris

詳細を10％または5％説明したいと思います。私はCSSが弱いからです。ありがとう – Thomas

あなたは偉大なガイドを見つける：あなたはスパンを使用してテキストを折り返す、その後position:relativeとtop:45%;

.content span { 
    position:relative; 
    top:48%;  
}

ライブの例を設定することができますVertical centering with CSS

出典

2010-12-07 11:38:07

良い方法はこれを行うことです。したがって、常に真ん中にあります（wあなたが固定された高さdivを持っている場合はorks）

<div class="centered"></div> 

html, body{height: 100%;} 
.centered{height: 500px; width: 500px; position: relative; top: 50%; margin-top: -250px; /* Just use a negative margin that is half the height of your element */

出典

2010-12-07 13:50:57 theorise

答えて

関連する問題