Question

我正在制作图形密集的布局，因此为了保持文件大小不变，我将布局限制为1600像素的固定宽度。

在1600像素中，重要内容属于中心1230.

我正在尝试找到一种方法来在浏览器中居中布局，同时保持内容可滚动。

当浏览器窗口小于1600px

时，此解决方案不会居中

#page{margin: 0 auto;}

当浏览器宽度变小时，此解决方案使内容的左侧无法访问。

#page{position: absolute; width: 1600px; top: 0; left: 50%; margin-left: -800px; }

感谢您的帮助。

Answer 1

如果要将元素置于小于元素的包装中心，可以使用absolute：

    #page{
      position: absolute;
      width: 1600px;
      top: 0;
      left:-100%;
      right:-100%;
      margin-left: auto;
      margin-right: auto;
   }

例如：http://jsfiddle.net/pavloschris/T5d8W/

Answer 2

我不确定您是否需要以像素为单位限制宽度。它在各种设备上都不是很便携，而且不清楚你为什么这么做。但是，如果要将1230像素区域置于1600像素范围内，则可以使用大小为(1600-1230) / 2的固定宽度边距。

对于更灵活的解决方案，柔性盒是一种可接受的技术吗？如果是这样，他们会使这项任务变得微不足道。使用以下内容制作页面容器：

  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;

然后制作你的物品

  flex: 0 0 auto

或设置特定宽度而不是auto。

Answer 3

此解决方案解决了无法访问的内容问题。

如果您有以下结构

#wrap.constrained > #layout > #content.constrained

您可以使用约束类将#wrap和#content限制为所需的宽度，并通过将侧边距设置为＆＃34; auto＆＃34;来水平居中。

然后你可以绝对地定位#layout，让它大于.constrained，并使用左定位和负左边距的组合来使它在#wrap方面居中。

以下是一个例子：http://jsfiddle.net/caKA7/

固定宽度布局居中，同时保持最小宽度可滚动

3 个答案: