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;（＆lt; 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;}

应该工作。

使宽DIV内的中心DIV以内容宽度扩展

4 个答案: