Question

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

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

长问题简短...无论浏览器窗口的大小如何，我必须做些什么来让网站始终居中...

EDIT1：逻辑问题是当减小浏览器窗口的宽度时，每个浏览器都将网站放在窗口的左“边框”上。是否有解决方法来防止这种情况？那么浏览器“移动”页面“否定”超出浏览器的左侧？

提前致谢

Answer 1

CSS：

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

使用百分比更安全但可能会导致定位问题等。使用min / max将风险降至最低。

Answer 2

如果您的固定宽度比屏幕大，那么一旦您获得较小的浏览器，就会发生这种情况。

您是否考虑过让它具有响应性，可能会有类似

的内容

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

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

那样你的主容器会用浏览器调整大小吗？

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

heres a link to a book apart

Answer 3

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/

中心网站小分辨率

3 个答案: