Flowing items horizontally w/ center alignment within a container

My dilemma is this (and should be simple, I suspect): I have a container and a set of items (both divs). The following CSS applies:

.container {
    float:          left;
    width:          100%;
}


.item {
    margin:         32px;
    text-align:     center;
    position:       relative;
    float:          left;
}

The .item itself is a container that could have al开发者_如何转开发most any set of arbitrary elements, but they need to be center aligned inside of it (in my case, it typically contains a thumbnail image and a small caption of text beneath it). While the above CSS allows each .item to flow horizontally the way I like, I can't figure out how to make the whole set center aligned (as opposed to flowing from left to right like it does now).

edit
Change .item { display: block; } to .item { display: inline-block; }, take away .item { float:left; } and add text-align: center; to .container

You can see it here: http://jsfiddle.net/JMC_Creative/RQrRb/

You could also put an .inner div with width:75%; margin: 0 auto; and then put your .items in that, if you are looking to have some space on the sides.

You'll want to take a look at this tutorial from Mozilla. It can be center aligned by just setting the parent container to text-align:center;

Cross Browser Inline Block

.container {
width: 100%;
}

.item {
margin: 32px;
text-align: center;
}