Question

我有div <div id="container"></div>，其中包含所有页面内容，包括页眉页脚等。

所以我想把这个div放在我页面的中心，现在我有了这个css：

#page{
position:relative;
margin:auto;
width:1000px;
}

它确实有效，但我的问题是此div中的内容不断变化，因此宽度也会发生变化，可能是1000px或10100px所以我需要像width:auto;这样的内容，如何可以做那样的事情吗？

Answer 1

请参阅： http://jsfiddle.net/thirtydot/rjY7F/

<强> HTML：

<div id="container">
    i'm as wide as my content
</div>

<强> CSS：

body {
    text-align: center;
}
#container {
    text-align: left;
    border: 1px solid red;
    display: inline-block;
    /* for ie6/7: */
    *display: inline;
    zoom: 1;
}

Answer 2

一种方法是在#page元素周围创建一个包装器，让我们称之为#wrapper：

#wrapper {
   position: relative;
   left: 50%;
   float: left;
}
#page {
   position: relative;
   left: -50%;
   float: left;
}

这将允许#page div保持可变宽度。

Answer 3

这将为您提供一个动态大小的div，它保持在正文的中心，是适合内容所需的最小尺寸：

body { text-align: center; }
div.container { display: inline-block; text-align: left; }

Answer 4

怎么样？

body {
  text-align: center;
}
#container {
  text-align: left;
}

假设<body><div id="container"></div></body>

以未知宽度居中的div

4 个答案: