0

我有以下问题。我有一个以所有元素为中心的网站。内容部分是一个宽度为 1060px 的 div，边距为 0 auto。到目前为止工作正常。

问题是当我将浏览器大小设置为 1024 时，这个 div 不居中，而是从左侧开始。这个 div 也有一个 40px 的内边距。在小分辨率下，您可以看到左侧的填充，但看不到右侧的填充。

长问题短...我该怎么做才能让网站始终居中，无论浏览器窗口大小如何..

Edit1：逻辑问题是每个浏览器在缩小浏览器窗口宽度时，都将网站放在窗口的左侧“边框”上。是否有解决方法来防止这种情况？让浏览器将页面“移动”到浏览器左侧之外？

提前致谢

4

3 回答 3

1

CSS：

body {
width: 99%;
max-width: 1060px;
min-width: 800px;
margin: auto 0;
}

使用百分比更安全，但它可能会导致定位等问题。通过使用最小/最大来最小化风险。

于 2012-12-13T13:50:43.447 回答
1

如果您的固定宽度大于您的屏幕，那么一旦您使用更小的浏览器，就会发生这种情况。

您是否考虑过使其具有响应性，也许有类似的东西

.container{
  width:100%;
  max-width:1060px

/* then any other styles, margin etc */
}

这样你的主容器会随着浏览器调整大小吗？

Ethan Marcotte 的响应式设计是一本可以在响应式网站上了解更多信息的好书。

这是一本书的链接

于 2012-12-13T13:51:19.017 回答
0 
html {
width:100%;
height:0 auto !important;
background: /* Any Background */;
}
body {
position:relative; // no need of wrapper if use this
top:0;
width:1060px;
// other properties here but no margin properties
}

$(document).ready( function() {
var q = $("html").width();
var w = $("body").width();
if (q <= w) {
q = w;
}
var e = q/2;
var r = w/2;
var left = e-r;
$("body").css({ "left":left+"px" });
});

或者如果你不喜欢它！

http://css-tricks.com/snippets/css/centering-a-website/

于 2012-12-13T14:00:14.010 回答