小型分辨率的中心網站

我遇到了以下問題。我有一個以所有元素爲中心的網站。內容部分是寬度爲1060px的div，邊距爲0自動。迄今爲止工作良好。小型分辨率的中心網站

問題是，當我將瀏覽器大小設置爲1024這個div不居中，但從左側開始。這個div也有一個40px的內部填充。在小分辨率時，你可以看到左側的填充物，但不是右側的填充物。

長問題短...我該做什麼才能使網站始終居中，無論如何瀏覽器窗口的大小是多少？

編輯1：邏輯問題是，當減少瀏覽器窗口的寬度時，每個瀏覽器都將網站放置在窗口的左邊界上。有沒有解決辦法來防止這種情況？爲了讓瀏覽器將瀏覽器的「負面」移動到瀏覽器左側以外？

在此先感謝

2012-12-13 sparks

這是您思考中的邏輯錯誤。你爲你的內容使用一個靜態寬度。因此，當視口的寬度小於content-div的寬度時，除了從左邊框開始並給出滾動條之外，沒有其他變化。如果您真的想要爲每種可能的瀏覽器大小進行居中，則必須使用動態測量（例如％）。但我不會讓佈局完全流暢，因爲這會破壞某些窗口大小的佈局。您是否考慮過使用媒體查詢並根據視口大小定義樣式？ –

CSS：

body { 
width: 99%; 
max-width: 1060px; 
min-width: 800px; 
margin: auto 0; 
}

使用百分比是安全的，但它可能會導致定位等問題。通過使用最小/最大值來降低風險。

來源

2012-12-13 13:50:43 bobthyasian

謝謝你，但我也不工作。具有絕對寬度div的東西是正確的......除了響應式設計之外還有其他解決方法嗎？ – sparks

@sparks作爲解決方法，響應式網頁設計是您最佳的選擇。閱讀關於該概念背後的想法。 – feeela

關於調整窗口大小的人，所有的元素都會漂浮在這裏和那裏，因爲身體寬度是百分比，這將導致在調整窗口大小時改變身體寬度！ –

如果您的固定寬度大於您的屏幕，那麼一旦您獲得較小的瀏覽器，就會發生這種情況。

你有沒有考慮使其反應靈敏，也許有類似

.container{ 
    width:100%; 
    max-width:1060px 

/* then any other styles, margin etc */ 
}

這樣，你的主容器將與瀏覽器的調整？

Ethan Marcotte的響應式設計是一本很好的書，可以在響應式網站上了解更多信息。

heres a link to a book apart

來源

2012-12-13 13:51:19 atmd

難道不是相反嗎？我通常使用'.wrapper {width：50em;最大寬度：95％;保證金：0汽車; }'有一個固定的流體佈局。 – feeela

適用於響應式網頁設計的+1。 –

@feeela取決於它的構建/設計。如果一個設計已經完成了，比如1100px，那麼Id就是以最大寬度爲中心。然後讓它響應任何小於設計/完美尺寸的 – atmd

html { 
width:100%; 
height:0 auto !important; 
background: /* Any Background */; 
} 
body { 
position:relative; // no need of wrapper if use this 
top:0; 
width:1060px; 
// other properties here but no margin properties 
} 

$(document).ready(function() { 
var q = $("html").width(); 
var w = $("body").width(); 
if (q <= w) { 
q = w; 
} 
var e = q/2; 
var r = w/2; 
var left = e-r; 
$("body").css({ "left":left+"px" }); 
});

，或者如果你不喜歡它！

http://css-tricks.com/snippets/css/centering-a-website/

來源

2012-12-13 14:00:14

其jquery！所以如果你正在使用我的代碼，請添加jquery！ –

小型分辨率的中心網站

回答

相關問題