我如何僞造一個容器出現居中並使其響應？

Question

我是一個相對較新的前端開發人員，從來不必在盒子外思考。對於工作，我有一個我以前沒有做過的設計。

代替水平導航菜單，我們使用垂直導航菜單，該菜單將粘貼在屏幕的左側，我們需要有一個居中的容器。該網站需要有響應。

背景信息：

左對準的垂直菜單處於寬度211px，高度爲300像素。容器寬960px。

問題：

由於導航菜單佔據屏幕的寬度，在使用餘量爲中心的容器的211px：0汽車用菜單重疊。所以，我決定使用以下嘗試假了：

margin: -22px 0px 0px 255px; 

但正如你所看到的，這樣做不能保證容器將出現在所有瀏覽器/平臺，同一個地方，這有點壞爲響應式設計。

問：

使用上述信息，我怎麼能正確地創建，對齊到其寬度爲211px和高度爲300像素和960像素寬的容器必須不居中的左側垂直菜單從屏幕尺寸而不是菜單本身？請記住，我需要做出迴應。

我是新來的，有點失落。

Answer 1

聽起來像你期待這樣做。

http://jsfiddle.net/yvg2f/1/

如果您創建和內容駐留在額外的容器，

<div id="container"> 
    <div id="nav">nav</div> 
    <div id="contentContainer"> 
     <div id="content">content</div> 
    </div> 
</div> 

你可以簡單地給一個＃內容：

margin: 0 auto 

它應該保持居中。你需要做的最大的事情就是考慮所有這些數字的百分比。否則，你就需要使用一些JavaScript到#contentContainer調整到尺寸：

document.width-211; 

，我不會考慮理想。