以更高的分辨率将页面布局居中

Centering a page layout on higher resolutions

本文关键字：布局分辨率更新时间：2023-09-26

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

然而，在我的客户的屏幕上，他有一个更大的分辨率，他看到屏幕的右边是空白的，并希望我把布局居中，而不是让它左对齐。(我把margin-left设置为0)

如果我只是增加margin-left，它会导致水平滚动条出现在较低的分辨率，如我的

有没有办法解决这个问题，将工作在所有的决议?或者我必须使用javascript来检测屏幕分辨率，如果分辨率大于某个值，则增加左距?

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

这将水平居中的元素id="wrapper"，所以如果你的所有内容都在该元素，你的页面将居中

基本上如果你应用margin-left: auto;和margin-right: auto;对于块元素，它将水平居中

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

#container {
  margin: auto
}