水平响应对齐列表项目，无需文本换行

Question

我有一个100％宽度的容器，我需要填充4个列表项。每个列表项都有一个图像，右侧有文本。我需要协助将列表项中心的每个图像和文本对齐，并在包含元素中对齐中心。如果调整浏览器窗口的大小，则文本无法在图像下方进行换行，并且仍然在容器中居中。

我认为100％容器和25％列表项可用于基本大小调整，但我不确定如何“打开”图像周围的文本并将每个项目居中。

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;
}

这是我的JSFiddle：http://jsfiddle.net/7N5HH/2/

谢谢！