最小宽度设置时，Div不居中 [英] Div doesn't center when min-width set
问题描述
我想要一个网页，内容居中，并指定最小宽度，以便在智能手机的小屏幕上调整大小，但在PC上仍然看起来很好。
I want a webpage, with the content centered, and specify a minimum width so it resizes on small screens of smartphones, but still looks fine on PCs.
我将div的宽度设置为1024px，边距为auto，那么当浏览器窗口的宽度比此宽时，div会保持居中。
If I set the width of my div to 1024px, and margins auto, then the div stays centered when the browser window is stretched wider than that.
但是显然这需要用户
因此我尝试将宽度更改为min-width：480px，div不保持居中在一个大的浏览器窗口。
So I tried changing width to "min-width:480px" and the div does not stay centered in a large browser window.
我做了很多谷歌搜索和博客/论坛帖子这个主题声称，你所要做的是设置最小宽度和自动边距。
I've done lots of googling and the blog/forum posts for this very topic claim that all you have to do is set min-width and auto margins.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
*
{
padding:0;
margin:0;
}
#content
{
margin: 0px auto;
min-width: 480px;
background:#BBB;
height:800px;
}
</style>
</head>
<body>
<div id="content">
<span>content</span>
</div>
</body>
</html>
在这个阶段我只在Chrome中测试。
At this stage I'm only testing in Chrome.
推荐答案
最小宽度将启动，因为div被告知比最小宽度值小 。如果你将div的宽度设置为 width：1024px; ，那么它总是 1024px 。但是，如果将它设置为百分比值（即100％，93.75％等），它将缩小，最小宽度值将一次输入 100％ min-width 。所以设置div的宽度是一个百分比值，你应该很好去。
min-width will kick in as the div is told to be smaller than the min-width value. If you set the width of the div to be width: 1024px;, then it will always be 1024px. However, if you set it to a percentage value (ie. 100%, 93.75%, etc), it will scale down, and the min-width value will kick in once 100% < min-width. So set the width of the div to be a percentage value, and you should be good to go.
此外，我不是一个巨大的粉丝包装我的所有内容在一个单一的，全方位的内容 div。也许我只是挑剔，但恕我直言，这是< body>< / body> 元素是为。您可以将 margin：0 auto; 添加到 Body 元素，浏览器。然后从那里的具体元素的边缘由你。无论如何，食物为思想。
Also, I'm not a huge fan of wrapping all of my content in a single, all-encompassing content div. Maybe I'm just picky, but IMHO, thats what the <body></body> element is for. And you can add margin: 0 auto; to just the Body element, and that will center the everything relative to the browser. Then the margins of the specific elements from there is up to you. Anyways, food for thought.
这篇关于最小宽度设置时，Div不居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
