css – 使内部DIV在宽DIV内扩展,内容宽度

我正在使用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解决它,但我真的不喜欢.

我一直在寻找类似的问题,但我没有找到一个完全回答这种情况.

有人可以请我点灯吗？

提前感谢您的任何意见.

弗朗西斯科

解决方法

你可以使用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以添加更多内容并查看有效的解决方案.)

原文地址：https://www.jb51.cc/css/214935.html