They are not meant to be centered at the first place - the float property arranges elements from left to right, filling up the width of the entire container (left to right) until it exceeds the width of the container, and the continues on the next line. Therefore all elements will be flushed towards the left and not centered.
In short, you can't center floated elements unless you set display: inline-block
on them (and remove the float), and then text-align: center
on the parent element. To mitigate the issue where a whitespace is present between each inline-block elements, set the font size in the parent container to 0, and the redeclare the desired font-size in the children:
.container {
background-color: #eee;
text-align: center;
font-size: 0; /* To remove space between inline-block elements */
width: 100%; /* or 960px, or any other value you desire */
}
.widget {
background-color: #aaa;
display: inline-block;
width: 25%;
font-size: 16px; /* Reset font size in widgets */
}
HTML:
<div class="container">
<div class="widget">Widget 1</div>
<div class="widget">Widget 2</div>
<div class="widget">Widget 3</div>
</div>
See fiddle here - http://jsfiddle.net/SzsuN/