如何对齐图像并将信息放在它们下面

Question

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

我正在使用此产品页面：http://hiking.comehike.com/outdoors/hiking_tshirt.php

在底部看到，项目照片在一行中很好地对齐，但是它们下面的价格和添加到购物车的按钮没有对齐。

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

谢谢！

Answer 1

我建议使用DIV 对它们进行分组example

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