Html 如何对齐图像并将信息放在其正下方

很久以前，我会使用标签之类的东西来垂直对齐列中的内容，但据我所知，现在很少这样做

我正在处理此产品页面：

请看底部，商品照片很好地排成一行，但它们下面的价格和要添加到购物车的按钮没有对齐

我如何调整价格并将购物车按钮添加到照片下方

谢谢

我建议用DIV将它们分组

<div class="product">
    <img src="http://www.comehike.com/img/items/white_tshirt.png" height=100 width=100 />
    <p class="price">$20.00</p>
    <input id="cashieAddToCart7116" type="button" value="Add to Cart" onclick="_cashieButtons[7116].add()">
</div>

$20.00