Question

我正试图将一组浮动的div中心化。

HTML

<div class="wrapper">
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    <div>
</div>

CSS

.Parent {
    float: left;
    background: #ccc;

    margin: 0 0 16px 0;
    clear: both
}
.Child {
    float: left;
    width: 150px;
    height: 50px;
}

jsfiddle http://jsfiddle.net/TDq7T/

我如何获得它以使子元素居中？我真的被困了

Answer 1

这对我有用：

.wrapper {
    width:100%;
    background-color:pink;
}

.parent {
    overflow:hidden;
    text-align: center;
}

.child {
    width:100px;
    height:100px;
    background-color:blue;
    display: inline-block;
    margin-right:10px;
}

参见jsfiddle：http://jsfiddle.net/TDq7T/2/

基本上，我删除了＆＃34; float：left＆＃34;并设置父级的中心对齐;

Answer 2

尝试类似 Demo

的内容

<强> CSS：

.wrapper {
    width:100%;
    background-color:pink;
     display:table;
}

.parent {
    margin:0 auto;
    overflow:hidden;
    display:table-cell;
    text-align:center;

}

.child {
    width:100px;
    height:100px;
    background-color:blue;
   display:inline-block;
    margin-right:10px;
}

以一群浮动的div为中心

2 个答案: