無法縮小中心內容

Question

我幾乎在網站的每個元素上都使用絕對定位。它正在正常工作 但是我唯一的問題是，當我縮小頁腳仍然很好centererd但標題（#header）和內容（#content）向左側移動。我使用的是margin：auto，甚至試圖用Jquery來集中它們，但問題仍然存在。所以任何人都可以給我一個解決方案。我會很感激。

這裏是網站：http://contestlancer.com/Trivia/

Answer 1

你應該把你的ID爲格「擱置」和「點對點」在一個包裝DIV，給汽車保證金爲包裝DIV。

<div style="margin-left:auto;margin-right:auto;width:1024px;" > 
    <div id="aside"> </div>  
    <div id="righter"> </div> 
</div> 

Answer 2

使用position:absolute，你基本上接管上的定位完全控制，這使得佈局一項艱鉅的任務，因爲你不留下任何東西給瀏覽器。

• 使用position:relative而不是position:absolute在哪裏使用。使用top:0px;' on both＃內容and＃頁腳。
• 在#header和#content中使用％作爲頂部的左邊距和寬度，就像已經在#footer中完成一樣。
爲 #content

例子：

#aside 
{ 
    top: 30px; 
    float: left; 
    display: inline; 
    background-color: #F7B800; 
    min-height: 500px; 
    position: relative; 
    border-radius: 9px; 
    text-align: center; 
    margin-left: 15%; 
    left: 0; 
    width: 30%;  
} 

#righter { 
    vertical-align: baseline; 
    top: 0px; 
    float: right; 
    display: inline; 
    left: 0px; 
    position: relative; 
    min-height: 550px; 
    word-wrap: break-word; 
    margin-right: 5%; 
    width: 45%; 
    margin-left: 5%;  
} 

一個重要的事情是，margin-left，margin-right和width兩個部分加起來爲100％。

Answer 3

當我使用Firebug檢查您的網站它表明#logo，#navigation，#righter和#aside在像素一套margin-left: ...px。

這意味着即使在縮小或放大時，它們始終都會有設置像素數量的左邊距。請嘗試使用百分比進行處理。即：

#righter { 
    left: 40%; 
} 

Answer 4

通常我做什麼，當有炒CSS和HTML混合的牛負荷，然後我會用jQuery迫使它：

var w = $(window), 
    el = $('#elementIwantToCenter'); 

//when first viewing the site => center el horizontally 
el.css({position: 'absolute', left: (w.width()-parseFloat(el.css('width')))/2}); 

//when resizing browser window => center el horizontally 
w.resize(function() { 
    el.css({left: ($(this).width()-parseFloat(el.css('width')))/2}); 
}); 
w.trigger('resize'); 

例如：http://jsfiddle.net/XSDM7/