瀏覽器大小的HTML CSS

我一直在使用下面的CSS代碼：瀏覽器大小的HTML CSS

#MainBox 
{ width: 488px; 
    height: 181px; 
    position: absolute; 
    left: 50%; 
    top: 236px; 
    margin-left: -244px; //this being half the width 
}

要確保頁面上的項目中心。問題是，當在iphone上查看此內容（並且我假設其他智能手機上的內容類似）時，頁面的左側被切掉！有誰知道我可以如何解決這個問題，並使一切變得健康？

謝謝！

來源

2012-09-21 user1677820

你被244px與CSS移動元素的左，iPhone屏幕這麼小，這是導致它被切斷。試試這個：

#MainBox{ 
    width: 488px; 
    height: 181px; 
    margin: 236px auto 0 auto; 
}

來源

2012-09-21 16:59:18

我要補充一點，這種類型的CSS並不適用於所有的屏幕尺寸很好的解決方案，因爲即使在你上面的內容將向下236px推這大概是iPhone屏幕高度的一半。您應該查看使用媒體查詢的響應式設計 –

以上以div爲中心的技術已經過時了。使用邊距：自動，寬度爲一個固定值（您已經擁有），並使父親位置：相對。

來源

2012-09-21 17:00:33

瀏覽器大小的HTML CSS

回答

相關問題