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

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>