使居中的DIV内宽DIV展开，内容宽度

Question

我使用2个div，父母和孩子。父级宽度为100％，其内容以文本对齐为中心。

孩子的div应该有一个宽度为零（或接近它的东西），并自动扩大其宽度与其内容，同时仍居于父div。例如：

+------------ PARENT DIV ------------+ 
|         | 
|   ..some content..   | 
|         | 
|   +--CHILD DIV--+   | 
|   |Inside child |   | 
|   +-------------+   | 
|         | 
+------------------------------------+ 

+------------ PARENT DIV ------------+ 
|         | 
|   ..some content..   | 
|         | 
|  +------ CHILD DIV ------+  | 
|  |Inside child with more |  | 
|  +-----------------------+  | 
|         | 
+------------------------------------+ 

如果我把一个固定的宽度，以孩子的div，我可以正确居中：

.parent { 
    width: 100%; 
} 
.child { 
    width: 100px; 
    margin-left: auto; 
    margin-right: auto; 
} 

但是，这不是我所需要的，我需要的是儿童的div扩大其宽度根据其内容。所以，我尝试使用float和nowrap：

.parent { 
    width: 100%; 
} 
.child { 
    float: left; 
    white-space: nowrap; 
    margin-left: auto; 
    margin-right: auto; 
} 

，对孩子本身的工作原理，但随后不再中心作为父的内容。

我可以通过使用Javascript解决它，但我真的不喜欢。

我一直在四处寻找类似的问题，但我还没有找到一个完全回答这种情况。

有人可以扔我一盏灯吗？

在此先感谢您的任何意见。

旧金山

Answer 1

您可以使用display: inline-block;（在< IE7不支持），但你必须用另一个块级元素的所有其他内容（如<p>或其他<div>）

.parent { 
    width: 100%; 
    text-align: center; 
     border: 1px solid #000; 
} 
.child { 
    display: inline-block; 
     border: 1px solid #f00; 
} 

http://jsfiddle.net/4kpsK/

（点击红色有边距的div来添加更多内容并且看到解决方案有效。）

Answer 2

你必须让你的孩子inline：

.parent { 
    width: 100%; 
    text-align: center; 
} 
.child { 
    display: inline; 
} 

见小提琴这里：http://jsfiddle.net/4wXTd/1/

Answer 3

我认为与其width可以使用max-width和display:inline。 但这有缺点：max-width在IE中不会被正确解释（我想至少有< 9），但在Webkit/Moz/Opera浏览器中，您应该是安全的。

Answer 4

.child{display:block; margin: auto;} 

应该工作。