center a ul in a div

center a ul in a div

Hi,
It is  a silly question but I am not able to solve this issue.
I have a ul list in a div , in the <li> I am putting images with a float left. (see attach).
The issue is I cannot center the list in the middle of the div, i have always the gap on the right. I think it is beacause of the float:left but how can i do?



<div data-role="content" style="padding:0px;margin-left:0%">
<ul id="Gallery" style="margin:0;padding:0;height:50%;"> <!--class="gallery" -->
<li style="list-style: none;padding: 0; margin: 0; float:left;"><a href="images/origImg/87-879.jpg" style="margin:0px"><img src="images/87-879.jpg" style="display: block; border:5px solid gray;" class="Img_Gall" alt="Statuette" /></a></li>
<li style="list-style: none;padding: 0; margin: 0; float:left;"><a href="images/origImg/105-1393.jpg" style="margin:0px"><img src="images/105-1393.jpg" style="display: block; border:5px solid gray;" class="Img_Gall" alt="Amphoriskos" /></a></li>
<li style="list-style: none;padding: 0; margin: 0; float:left;"><a href="images/origImg/115-17926.jpg" style="margin:0px"><img src="images/115-17926.jpg" style="display: block; border:5px solid gray;" class="Img_Gall" alt="Flask" /></a></li>

......

    </ul>
</div> <a href="https://d2r1vs3d9006ap.cloudfront.net/s3_images/1056730/Untitled.png?1400227516"><img src="https://d2r1vs3d9006ap.cloudfront.net/s3_images/1056730/Untitled_inline.png?1400227516" alt="" /></a>