How to align images and put information right underneath them

A long time ago, I would use something like the tag to align things vertically in columns, but as I understand it, that is rarely done now.

I am working on this product page: http://hiking.comehike.com/outdoors/hiking_tshirt.php

See at the bottom, the item photos are aligned together nicely in a row, but the prices underneath them, and the buttons to add to cart, are not aligned.

How could I align the prices and ad开发者_如何学编程d-to-cart buttons to be right under the photos?

Thanks!

I suggest grouping them, example, with a 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>