在中心对齐浮动div的父级

Question

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

http://jsfiddle.net/te9fzaub/4/ - Simple example;

Ok, so i have the code above, what i'm trying to achieve is to have .child floated left and .parent on display:inline-block; but being centered in .bigParent .
The issue i'm getting i that if the 3rd .child div isn't fitting in the .bigParent width, it puts it on a new line and it makes .parent div's width 100%;
Thanks in advance, love this community!

Answer 1

I know this is a method, but i'd like to use only css if possible. I've posted it as answer so maybe others having this problem might consider this a temporary solution.

var maxWidth = $('.bigParent').width(),
    childWidth = $('.child').width(),
    nrOfChildren = Math.floor(maxWidth/childWidth),
    parentWidth = nrOfChildren*(childWidth);

$('.parent').width(parentWidth);

http://jsfiddle.net/te9fzaub/6/
Still waiting for a CSS method anyway.

Answer 2

Is it possible to wrap 2 .child divs with additional div?

jsfiddle

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