Help making nicely centered columns with images of varying ratios

I'm trying to make three columns with the titles "Friday", "Saturday", and "Sunday". Each column will have a series of images that are embedded via embedly (which end up as <img> tags where I have a href in case you're wondering).

I'm having trouble getting the images to center nicely directly underneath the column headers because the images are different aspect ratios (not sure if I'm using the term correctly).

For example this picture is much wider than this picture.

Here is my code so far.

<table>
    <tr>
        <th>Friday</th>
     开发者_开发问答   <th>Saturday</th>
        <th>Sunday</th>
    </tr>
    <tr>
        <td><div class="featuredGame">
                <a href="http://www.flickr.com/photos/amandarykoff/5748058467/"></a>
                <p> Subway Series </p>
            </div>
        </td>
        <td>
            <div class="featuredGame">
                <a href="http://www.flickr.com/photos/amandarykoff/4732779602/"></a>
                <p> Subway Series </p>
            </div>
        </td>
        <td>
            <div class="featuredGame">
                        <a href="http://www.flickr.com/photos/5chw4r7z/3559678190/"></a>
                        <p> Subway Series </p>
            </div>
        </td>
    </tr>
    <tr>
        <td><div class="featuredGame">
                <a href="http://www.flickr.com/photos/adamzalaznik/4524246710/"></a>
                <p> Subway Series </p>
            </div>
        </td>
        <td>
            <div class="featuredGame">
                <a href="http://www.flickr.com/photos/24793373@N07/3823565546/"></a>
                <p> Subway Series </p>
            </div>
        </td>
        <td>
            <div class="featuredGame">
                <a href="http://www.flickr.com/photos/unbirthdayparty/5738164359/"></a>
                <p> Subway Series </p>
            </div>
        </td>
    </tr>
</table>

And the css for featuredGame:

NOTE the #featured tag is intentional. This table is encased within <div id="featured">

#featured .featuredGame {
    position: relative;
    height: auto;
    width: 150px;
    font-size: 1.0em;   
}

th td {text-align:center;}

In you css block put margin-left:auto; margin-right:auto; that should center it

1. your style rule is trying to apply styles to an element with an id="featured" AND a class="featuredGame. That's part of the reason it is failing. (At least without the embedly.) Remove the id and the styles start to work.

2. The images are very large Does embedly shrink them? If not, your table design will not hold them well in a standard resolution browser.

Try changing

th td {text-align:center;}

to

th, td {text-align:center;}

http://jsfiddle.net/blineberry/ubmW3/

Is that what you're looking for?