以小分辨率居中网站答案

【问题标题】：Center Website at small resolution以小分辨率居中网站
【发布时间】：2012-12-13 22:11:38
【问题描述】：

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

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

很长的问题很短...无论浏览器窗口的大小如何，我都必须做些什么才能使网站始终居中..

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

提前致谢

【问题讨论】：

那是你的思维逻辑错误。您为内容使用静态宽度。因此，当 viewport 的宽度小于 content-div 的宽度时，除了从左边框开始并给出滚动条之外没有其他变化。如果您真的想要为每个可能的浏览器尺寸居中，那么您必须使用动态测量（例如 %）。但我不会使布局完全流畅，因为这会破坏某些窗口大小的布局。您是否考虑过使用媒体查询并根据视口大小定义样式？

标签： css html browser center

【解决方案1】：

CSS：

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

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

【讨论】：

谢谢你，但我也不工作。绝对宽度 div 的东西是对的......除了响应式设计之外还有其他解决方法吗？
@sparks 响应式网页设计是您最好的解决方法。阅读有关该概念背后的想法的内容。
关于调整窗口大小的人所有元素都会在这里和那里浮动，因为正文宽度是百分比，这将导致调整窗口大小时正文宽度发生变化！
@Aspiring Aqib 使用 body 只是一个例子。大声笑
大声笑出来，这只是例子……哈哈哈，哦，伙计，我也在笑，哦，那只是例子！嘿，伙计，给我地方躲起来。哦，伙计，这只是一个例子！ :LOL 如果它是一个例子，虽然你学到了一些东西！

【解决方案2】：

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

你是否考虑过让它响应，也许有类似的东西

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

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

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

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

heres a link to a book apart

【讨论】：

不应该反过来吗？我通常使用 .wrapper { width: 50em; max-width: 95%; margin: 0 auto; } 之类的东西来进行固定的流体布局。
@feeela 取决于它的构建/设计方式。如果设计是在 1100 像素处完成的，则 Id 将其作为最大宽度，居中。然后让它响应任何小于设计/完美尺寸的东西

【解决方案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/

【讨论】：