当最小宽度设置时，Div不居中

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.

我想要一个内容居中的网页,并指定最小宽度,以便在智能手机的小屏幕上调整大小,但在PC上看起来仍然很好。

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.

如果我将div的宽度设置为1024px,并将margin设置为auto,那么当浏览器窗口拉伸得更宽时,div会保持居中。

But obviously this requires the user to scroll sideways if they're viewing the site on a small screen.

但显然,如果用户在小屏幕上查看网站,则需要用户侧向滚动。

So I tried changing width to "min-width:480px" and the div does not stay centered in a large browser window.

所以我尝试将宽度更改为“min-width:480px”,并且div不会在大型浏览器窗口中保持居中。

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>

At this stage I'm only testing in Chrome.

在这个阶段,我只在Chrome中测试。

4 个解决方案

#1

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被告知小于最小宽度值时,min-width将启动。如果将div的宽度设置为宽度:1024px;,则它将始终为1024px。但是,如果将其设置为百分比值(即100%,93.75%等),它将按比例缩小,并且最小宽度值将在100% 时启动。所以将div的宽度设置为百分比值,你应该好好去。

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中的忠实粉丝。也许我只是挑剔,但恕我直言,这就是元素的用途。你可以添加保证金:0 auto;只有Body元素,这将使所有相对于浏览器的中心。然后,那里的特定元素的边距取决于你。无论如何,值得深思。

#2

That's because min-width is a constraint and not a width declaration. Auto centering using margin:0 auto only takes a width declaration to work. One suggestion would be to just define a width for your #content area and add a @media query for mobile devices with a width of 100%.

那是因为min-width是一个约束而不是宽度声明。使用margin自动居中:0 auto只需要宽度声明即可工作。一个建议是只为#content区域定义宽度,并为宽度为100%的移动设备添加@media查询。

e.g.

#content { width:960px; }

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation:portrait) {
    #content {
        width:100%;
    }
}

#3

Yes, min-width will make your div 480px wide on small screens - it means that if the screen is smaller that 480px, your div won't fit.

是的,最小宽度将使你的div在小屏幕上宽480px - 这意味着如果屏幕小于480px,你的div将不适合。

The thing is, div is a block element so if you won't specify the width, it will stretch to be as wide as the parent element.

问题是,div是一个块元素,所以如果你不指定宽度,它将拉伸到与父元素一样宽。

I would suggest to look into media queries

我建议调查媒体查询

I hope it helps!

我希望它有所帮助!

#4

You have not specified a fixed width for your content container so by default it's going to take up the full width of it's parent.

您没有为内容容器指定固定宽度,因此默认情况下它将占用其父级的全宽。

And you can't set a min-width if you have a fixed width.

如果你有一个固定的宽度,你不能设置最小宽度。

Typically, you'd have a separate CSS sheet just for mobile devices and use a media query.

通常,您只有一个单独的CSS表单,仅用于移动设备并使用媒体查询。

#1

#2