2012-03-03 10 views
0

私は「待ってください」と表示しているdivがあります。これはIE7で正常に動作しているウェブページの中央にdivを表示します

<div id="pleaseWait" class="divOuterPleaseWait" style="left:expression((documentElement.clientWidth-this.offsetWidth)/2);top:expression(documentElement.scrollTop+((documentElement.clientHeight-this.clientHeight)/2));">Please Wait...</div>

divのためのマークアップです。 IE7では、divはページの中央に表示されます。しかし、他のブラウザ(IE8、IE9、FireFox、Google Chromeなど)では除外されていません。これをすべてのブラウザで動作させるにはどうすればよいですか?また、インラインスタイルを私のCSSに移動することはできますか?

+1

margin:0 auto ???? – Jack

+0

@Pankaj margin:0 auto;作品幅は幅を定義する – sandeep

+0

そのメッセージだけを表示していると、なぜ幅が問題になるのですか? – yoda

答えて

1

this SO answer、またはthis jsfiddle(キーを押して '確認' ボタン)を参照してください。あなたの質問に表示されたCSSはブラウザ固有のものです(特に:IE)。 javascriptでは、 'viewport'ディメンション(使用可能なスクリーンの高さ/幅)を決定し、そのディメンションを基準にして要素を配置することで、エレメントの中心を合わせることができます。ここのリンクは、これを行う方法を示しています。

0

CSSで式を使用しているため、さまざまな理由(低速、非推奨、非標準)の2つが非常に悪く、2)不要なため、「他のブラウザ」では動作しません。

すべてのブラウザで同じことを達成するには、純粋なCSSの配置(パーセンテージと負のマージン)または少しのJavaScript(これは非常に簡単です)を使用できます。

http://jsfiddle.net/fLa4S/

+0

これは問題ではないのはなぜですか?それはそれを動作させるものです。解決策はありますか? –

+0

@AshBurlaczenko - 私の答えを参照してください: "パーセントと負のマージン"。 –

3

DIVをセンタリングするための良い方法は、固定された位置を使用することで、上部と左アプローチ:

<div style="text-align:center;width=200px;margin-left:auto;margin-right:auto">Please wait...</div> 
+0

正確には、固定配置にはIE 7にいくつかの特質があります(z-indexを尊重しないで、バグを描いている)。 –

0

別:幅/高さの半分の負の50%と左及び上マージンに設定

0

CSS表現はIEでのみ動作します。しかし、W3Cに準拠していないため、一般的には使用しないことをお勧めします。また、頻繁に使用すると非常に遅くなる可能性があります。固定ここであなたを助けることができる::CSS属性の位置が

(!CSSの定義内ではなく)

#pleaseWait { 
    width: 400px; 
    height: 200px; 
    position: fixed; /* IE8+ */ 
    left: 50%; 
    top: 50%; 
    margin-left: -200px; /* half of width*/ 
    margin-top: -100px; /* half of height*/ 
} 

をあなたはまだあなたがJavaScriptを使用する必要が< = IE7をサポートする必要がある場合

0

使い方あなただけvertiを中央にしたい場合は余白幅と絶頂の定義など自動

<div style="width:200px;height:50px;margin:auto;text-align:center">Please wait ...</div> 

十分なはずです灰色、使用マージン:0自動;

PS:How to set the div in center of the page:あなたは、より多くのXHTML-正確でCSSファイルであなたのCSSを入れて、CSS-スタイリング

を定義するクラスやIDを使用したい場合、私は前にこれに答えました

関連する問題