Hello people, I am trying to align only the images on the center of my list item, any suggestion?

the code:
<style type="text/css" media="screen">
<!--
html, body { height: 100%; width: 100%; }
#wrapper {
width: 800px;
margin: 0 auto;
border: 1px solid yellow;
display: table;
}
ul {
border: 1px solid red;
margin: 0 auto;
width: 660px;
display: table;
}
ul li {
display: table;
margin: 0 auto;
float: left;
border: 1px solid green;
width: 150px;
padding:20px;
}
ul li img {
margin: 10px auto;
background: #fff;
padding: 4px;
border: 1px solid #ddd;
}
strong,small { display: block; }
-->
</style>
<div id="wrapper">
<ul>
<li>
<strong>loren ipsum</strong>
<img src="mf.png" alt="" />
<small>Legenda</small>
<a href="#" title="">
more.
</a>
</li>
<li>
<strong>Teste</strong>
<img src="mf2.png" alt="" />
<small>Legenda</small>
<a href="#" title="">
more.
</a>
</li>
<li>
<strong>Teste</strong>
<img src="mf3.png" alt="" />
<small>Legenda</small>
<a href="#" title="">
more.
</a>
</li>
</ul>
</div>

I am using the eric meyer reset css.