html - 如何对齐图像并将信息放在图像下方

Question

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

我正在处理这个产品页面:http://hiking.comehike.com/outdoors/hiking_tshirt.php

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

我怎样才能将价格和添加到购物车的按钮对齐到照片的正下方？

谢谢!

Answer 1

我建议将它们分组，example , 有一个 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>