centre a group of floated divs

Question

I'm trying to centre a group of floated divs.

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/

How would I get it so that the child elements are centred? I'm really stuck

score 3 · Accepted Answer · answered Jul 28 '14 at 11:07

This works for me:

.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;
}

See jsfiddle: http://jsfiddle.net/TDq7T/2/

Basically, I removed the "float: left" and set the center align of parent;

score 0 · Answer 2 · answered Jul 28 '14 at 11:08

Try something like this 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;
}

centre a group of floated divs

2 Answers2