7

我正在使用 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 根据其内容扩展其宽度。所以我尝试使用floatand nowrap：

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

这适用于孩子本身，但它不再作为父母的内容居中。

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

我一直在寻找类似的问题，但我还没有找到一个可以准确回答这种情况的问题。

有人可以给我一个灯吗？

提前感谢您的任何评论。

弗朗西斯科

4

4 回答 4

5

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

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

http://jsfiddle.net/4kpsK/

（单击红色边框的 div 以添加更多内容并查看有效的解决方案。）

于 2013-04-25T09:01:28.207 回答
0

你必须让你的孩子inline：

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

在此处查看小提琴：http: //jsfiddle.net/4wXTd/1/

于 2013-04-25T08:53:23.797 回答
0

我认为width你可以使用max-widthand代替display:inline。但这有缺点：max-width在 IE 中无法正确解释（我认为至少 <9），但在 Webkit/Moz/Opera 浏览器中你应该是安全的。

于 2013-04-25T08:55:45.367 回答
0 
.child{display:block; margin: auto;}

应该管用。

于 2013-04-25T09:06:21.327 回答