html - 我如何伪造一个容器以使其居中并使其响应？

Question

我是一个相对较新的前端开发人员，从来不需要跳出框框思考。对于工作，我有一个以前没有做过的设计。

我们使用的是垂直导航菜单，而不是水平导航菜单，它会粘在屏幕的左侧，我们需要一个居中的容器。该网站需要响应。

背景资料：

左对齐的垂直菜单宽度为 211 像素，高度为 300 像素。容器宽 960 像素。

问题：

因为导航菜单占据了 211px 的屏幕宽度，所以当使用 margin: 0 居中时，容器会自动与菜单重叠。所以我决定尝试使用以下方法伪造它：

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

但正如您所看到的，这样做并不能保证容器会在所有浏览器/平台上出现在同一个位置，这对于响应式设计来说有点糟糕。

问题：

使用上述信息，我如何正确创建一个垂直菜单，该菜单与左侧对齐，其宽度为 211 像素，高度为 300 像素，以及一个 960 像素宽的容器，该容器不需要从屏幕大小居中，而是从菜单本身居中? 另请记住，我需要对此做出响应。

我对此很陌生，有点迷茫。

score 0 · Accepted Answer

听起来你想这样做。

如果您为要驻留的内容创建和额外的容器，

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

您可以简单地给#content a：

margin: 0 auto

它应该保持居中。您需要做的最重要的事情是考虑所有这些数字的百分比。否则，您需要使用一些 javascript 将 #contentContainer 调整为 size ：

document.width-211;

我认为这并不理想。

1 回答 1