如何对齐图像并将信息放在它们的正下方

Question

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

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

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

我如何将价格和添加到购物车按钮对齐到照片的正下方?

谢谢!

Answer 1

我建议将它们分组，示例，使用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>