CSS在所有瀏覽器中的屏幕中心位置圖像，但IE瀏覽器

我在相關的問題部分找不到類似的問題，所以想通過我試試我的運氣。CSS在所有瀏覽器中的屏幕中心位置圖像，但IE瀏覽器

我正在設計一個頁面，加載時間明顯足夠長，以便加載圖標可以出現。目前，我已將其設置爲使圖標顯示在屏幕中央，在頁面加載完成之前在頁面上顯示半透明疊加層。下面是我使用

 <style type="text/css"> 
    #overLayBackground{ 
    background-color: rgb(250, 250, 250); 
    opacity: 0.7; /* Safari, Opera */ 
    -moz-opacity:0.25; /* FireFox */ 
    filter: alpha(opacity=70); /* IE */ 
    z-index: 200; 
    height: 100%; 
    width: 100%; 
    background-repeat:repeat; 
    position:fixed; 
    top: 0px; 
    left: 0px; 
    text-align:center; 
     line-height: 240px; 
    } 

    #overLayBackground>img { 
     position:absolute; bottom:0; top:0; left:0; right:0; margin:auto; 
    }

<div id="overLayBackground"> 
    <img src="www.example.com/images/loading.gif" title="Image" alt="The image" /> 
</div>

現在這個工程在Firefox和Chrome預期的代碼，但IE瀏覽器在左上角顯示的圖標。有沒有辦法讓它像其他瀏覽器一樣運行，並將它放置在屏幕的中心？

在此先感謝。

來源

2010-01-14 canadiancreed

這是什麼告訴我們關於IE？ – Rob 2010-03-25 20:08:45

找到解決方案。如果將#overLayBackground> img行更改爲position：absolute;頂部：50％;左：50％;它可以在IE和FF中對圖像進行垂直和水平居中。感謝所有的迴應。

來源

2010-03-25 19:53:23 canadiancreed

這似乎並沒有解決問題。你能發佈完整的解決方案嗎？ – Stavros 2010-05-23 17:47:28

如果您使用margin：auto來居中，那麼您不應該對img使用絕對定位。

編輯：在迴應評論。保證金：汽車只適用於水平居中，這是根據定義利潤的工作原理。對於垂直居中，我在過去使用過不同的技術，通過使用top：50％，然後使用負的top margin。

我推薦這alistapart文章：

http://www.alistapart.com/articles/holygrail/

多alistapart善良這裏：

http://www.alistapart.com/articles/practicalcss/

來源

2010-01-14 19:25:56 Yoni

感謝您的回覆。嘗試以下配置，結果如下：位置：相對，無邊距：自動 - IE和FF都將圖像水平居中，但圖像位於屏幕的頂部而不是垂直居中。沒有位置設置，邊距：自動 - 相同的東西。位置：相對，邊距：自動 - 相同的東西。位置：絕對，無邊距：自動 - IE和FF都在左上角有圖像 – canadiancreed 2010-01-14 19:37:59

一旦你指定一個DOCTYPE並修復語法錯誤（你的代碼在IE8樣式標籤內的div）。

來源

2010-01-14 19:26:50

感謝您的回覆，並感謝div內的風格。在頁面頂部，文檔類型如下：<！doctype html public「 - // W3C // DTD HTML 4.0 Transitional // EN」「http://www.w3.org/TR/html4/ strict.dtd「>我可以用這個文檔類型工作嗎？（不知道爲什麼不，但你永遠不知道） – canadiancreed 2010-01-14 19:40:06

只要使用問題的代碼和文檔類型，它的工作.. – Stavros 2010-05-23 17:52:28

這裏有一個自定義的我已經與我的自定義雲應用程序使用一個：NGEN Preload Screen

查看源body.onload行動...

隨時在您的休閒也可以將其.. 。

來源

2010-01-14 19:27:37 DoctorLouie

CSS在所有瀏覽器中的屏幕中心位置圖像，但IE瀏覽器

回答

相關問題