CSS Centering content with float left and multiple rows - html

Question

I have a site where I am displaying products. I want the products to fit as many on one line as the set width and margins will allow. I want it to have the items float left (at least have the last items float left), however I also want them centered.
Code (fiddle):
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
}
li {
list-style-type: none;
float: left;
width: 150px;
height: 150px;
margin: 20px;
padding: 3px;
background: #CCCCCC;
text-align: center;
}
li img {
max-width: 144px;
}
<ul>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
</ul>
<ul>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
</ul>
<ul>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
</ul>
As shown on jsfiddle, this is what I essentially have but want the products (represented by the boxes) to also be centered in the page.

Answer 1

You can try display: inline-block instead of float: left:
ul {
text-align: center;
}
li {
display: inline-block;
}
ul {
margin: 0px;
padding: 0px;
text-align: center;
}
li {
display: inline-block;
width: 150px;
height: 150px;
margin: 20px;
padding: 3px;
background: #CCCCCC;
}
li img {
max-width: 144px;
}
<ul>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
</ul>
<ul>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
</ul>
<ul>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
</ul>

Answer 2

Try this, I changed your css:
<style type="text/css">
ul { list-style-type:none; margin:0px; padding:0px; overflow:hidden; text-align: center;}
li { list-style-type:none; display: inline-block; width:150px; height:150px; margin:20px; padding:3px; background:#CCCCCC; text-align:center; }
li img { max-width:144px; }
ul { text-align: center; }
</style>

Answer 3

My solution, trying to preserve your code, is wrapping everything inside a div with a fixed width and margin set to auto:
HTML
<div>
<ul>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
</ul>
</div>
CSS
ul { list-style-type:none; margin:0; padding:0;overflow:hidden;}
li { list-style-type:none;float:left; width:150px; height:150px; margin:20px; padding:3px; background:#CCCCCC; text-align:center; }
img { max-width:144px; }
div{margin: auto;width: 590px;}
FIDDLE
http://jsfiddle.net/33baohc7/1/