小型分辨率的中心网站

我遇到了以下问题。我有一个以所有元素为中心的网站。内容部分是宽度为1060px的div，边距为0自动。迄今为止工作良好。小型分辨率的中心网站

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

长问题短...我该做什么才能使网站始终居中，无论如何浏览器窗口的大小是多少？

编辑1：逻辑问题是，当减少浏览器窗口的宽度时，每个浏览器都将网站放置在窗口的左边界上。有没有解决办法来防止这种情况？为了让浏览器将浏览器的“负面”移动到浏览器左侧以外？

在此先感谢

2012-12-13 sparks

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

CSS：

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

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

来源

2012-12-13 13:50:43 bobthyasian

谢谢你，但我也不工作。具有绝对宽度div的东西是正确的......除了响应式设计之外还有其他解决方法吗？ – sparks

@sparks作为解决方法，响应式网页设计是您最佳的选择。阅读关于该概念背后的想法。 – feeela

关于调整窗口大小的人，所有的元素都会漂浮在这里和那里，因为身体宽度是百分比，这将导致在调整窗口大小时改变身体宽度！ –

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

你有没有考虑使其反应灵敏，也许有类似

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

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

这样，你的主容器将与浏览器的调整？

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

heres a link to a book apart

来源

2012-12-13 13:51:19 atmd

难道不是相反吗？我通常使用'.wrapper {width：50em;最大宽度：95％;保证金：0汽车; }'有一个固定的流体布局。 – feeela

适用于响应式网页设计的+1。 –

@feeela取决于它的构建/设计。如果一个设计已经完成了，比如1100px，那么Id就是以最大宽度为中心。然后让它响应任何小于设计/完美尺寸的 – atmd

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-13 14:00:14

其jquery！所以如果你正在使用我的代码，请添加jquery！ –

小型分辨率的中心网站

回答

相关问题