Responsive align list items horizontally without text wrap - html

Question

I have a 100% width container I need to fill with 4 list items. Each list item has an image with text on the right of it. I need assistance aligning each image and text in the center of the list item and aligned center in the containing element. If the browser window is resized the text cannot wrap below the image and still be centered within the container.
I thought 100% container and 25% list items would work for the base sizing but I'm unsure of how to 'unwrap' the text around the image and center each item.
HTML:
<div class="container">
<ul class="products">
<li class="product">
<img src="http://placehold.it/50x50" />Asian Food</li>
<li class="product">
<img src="http://placehold.it/50x50" />Indian Food</li>
<li class="product">
<img src="http://placehold.it/50x50" />Asian Stuff</li>
<li class="product">
<img src="http://placehold.it/50x50" />Indian Stuff</li>
</ul>
CSS:
.container {
width: 100%;
margin: 0 auto;
overflow: auto;
background: grey;
}
.products {
margin: 0 auto;
list-style-type: none;
}
.product {
position: relative;
background: white;
float: left;
width: 25%;
text-align: center;
}
Here's my JSFiddle: http://jsfiddle.net/7N5HH/2/
Thank you!