垂直居中和div佔據空間的問題

我有一個930像素高的圖像，我想在屏幕的中間位置居中。我使用了推薦的CSS代碼片段。

position: absolute; 
top: 50%; 
left: 50%; 
width: 1280px; 
height: 930px; 
margin-top: -465px; 
margin-left: -640px;

但不幸的是，如果視口小於930px，它開始裁剪區域的頂部。我嘗試了一些方法，但似乎沒有任何幫助。另外，在Chrome中，我設法讓它具有一定的大小，但移動的div不需要滾動，但是在Firefox和IE中，它們似乎仍然佔用了移動前的空間（使用左邊：和top :)

任何幫助，將不勝感激，謝謝。

來源

2011-07-21 Smashman

當你說你想在「屏幕中」向中心做你的意思是瀏覽器中的網頁中間？（注意瀏覽器可能不會最大化;我正在瀏覽器中閱讀這個頁面，這個瀏覽器只佔屏幕的四分之一左右）。另外，「移動div」是什麼意思？ – nnnnnn

另外，如果視口小於930像素（即比img小），那麼關於正在裁剪的頂部的評論，那麼您希望在這種情況下發生什麼？一個大於窗口的圖像將不得不裁剪或調整大小以適合... – nnnnnn

我已經放棄了，只是在頂部接受了8px的邊距。看起來沒問題。無論如何，divs仍佔用空間。我有很多具有特定高度的div。現在，我已將它們移動到圖像上，使用左側和頂部命令製作可點擊區域。在Chrome中，沒有滾動條，因爲它們都佔用了正確的空間（在圖像上），令人煩惱的是，在IE和Firefox中，它們似乎仍然在移動之前佔據了原始空間，這意味着有很多空閒空間在我的形象之下。有什麼可以做的嗎？謝謝。 – Smashman

我有一個醜陋的解決方案，但它的工作原理，除了IE < 8：

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title></title> 
</head> 

<body> 
    <div id="positioner"></div><!-- 
    --><img src="yourimage" alt="" id="image" /> 
</body> 
</html>

和CSS：

html,body,#positioner { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
body { 
    text-align:center; 
} 
#positioner { 
    display:inline-block; 
    vertical-align:middle; 
} 
#image { 
    max-height:100%; 
    max-height:100%; 
    vertical-align:middle; 
}

來源

2011-07-21 12:23:31 MatTheCat

不幸的是，這不工作，因爲我希望。我把圖片作爲我的pageContainer div的背景圖片。 – Smashman

我們仍然不知道你的願望^^ – MatTheCat

在這種情況下，我會嘗試啓發你。這裏是網頁：http://dl.dropbox.com/u/897064/SO/index.html 你可以看到我有那裏的CSS和HTML。它在Chrome中看起來很完美（除了頂級的中斷），但在IE和Firefox中令人討厭的是它存在主要問題。 – Smashman

垂直居中和div佔據空間的問題

回答

相關問題