将一组浮动 div 居中

Posted 2023-03-29

【中文标题】将一组浮动 div 居中

【英文标题】：centre a group of floated divs

【发布时间】：2014-09-19 13:27:32

【问题描述】：

我正在尝试使一组浮动 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/

如何让子元素居中？我真的卡住了

【参考方案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/

基本上，我删除了“float：left”并设置了parent的居中对齐；

【参考方案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;