以较高的分辨率居中显示页面布局

Question

我在一个网站上工作，其中有一些大的图像等显示。在我的屏幕上，分辨率为1024x768，它完全适合屏幕，从左到右。

然而，在我的客户的屏幕上，他的分辨率更高，他认为屏幕的右边部分是空白的，并希望我将布局居中，而不是让它左对齐。(我将左边界设置为0。)

如果我只是简单地增加左边距，它将导致水平滚动条出现在像我这样的较低分辨率上。

有没有办法解决这个问题，对所有的分辨率都有效？或者我必须求助于javascript，它将检测屏幕分辨率，并在分辨率大于某个值时增加边距？

Answer 1

#wrapper { margin: 0 auto; width: 960px; }

这将水平居中一个带有id=“包装器”的元素，因此，如果所有内容都在该元素内，则页面将居中

基本上，如果您对块元素应用空白区-左:自动；和空白区-右:自动；，它将水平居中

Answer 2

在所有想要居中的元素周围创建一个容器元素，并给它一个id，比如id="container"，然后添加一个css选择器来居中它。

#container {
  margin: auto
}