Html 响应式水平对齐列表项，无文字换行

我有一个100%宽度的容器，我需要填充4个列表项。每个列表项都有一个右侧带有文本的图像。我需要帮助对齐列表项中心的每个图像和文本，并对齐包含元素的中心。如果调整了浏览器窗口的大小，则文本不能环绕在图像下方，并且仍然在容器中居中

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

HTML:

以下是我的JSFIDLE：

---

谢谢大家!

文本应该位于图像的下方或右上方？将文本以一个跨距进行包装，并在产品上设置一个最小宽度（以像素为单位）。这确实解决了文本包装问题。但是，如果调整大小，列表项将堆叠在彼此的顶部。如果可能的话，我想保持水平。

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

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