Проблемы с выравниванием изображения в ячейках таблицы

Question

У меня есть таблица с 45 изображениями и некоторыми надписями под изображениями. У меня возникают проблемы с правильной настройкой каждого изображения, когда за ним следует большая надпись (см. Подпись 4.jpg). Когда имеется более одной строки текста, изображение вверху слегка продвигается над другими изображениями в строке. Мне трудно понять, почему это так.

Вот первая строка таблицы элементов:

<table> 
    <tr> 
    <td><a href="photos/1.jpg" title="354 Address Way"><img src="photos/1_t.jpg" width="72" height="72" alt="" /></a>House</td> 
    <td><a href="photos/2.jpg" title="354 Address Way"><img src="photos/2_t.jpg" width="72" height="72" alt="" /></a>House</td> 
    <td><a href="photos/3.jpg" title="Foyer"><img src="photos/3_t.jpg" width="72" height="72" alt="" /></a>Foyer</td> 
    <td><a href="photos/4.jpg" title="Family Room with small fireplace"><img src="photos/4_t.jpg" width="72" height="72" alt="" /></a>Family Room with small Fireplace</td> 
    <td><a href="photos/5.jpg" title="Family Room 2"><img src="photos/5_t.jpg" width="72" height="72" alt="" /></a>Family Room 2</td> 
    </tr> 

Таблица CSS:

table { 
    width: 570px; 
    font-size: .5em; 
    text-align: center; 
} 

table td { 
    width: 128px; 
    padding: 0px 10px 0px 10px; 
} 

table img { 
    border: 5px solid #3e3e3e; 
    border-width: 2px 2px 2px; 
} 

table a:hover img { 
    border: 5px solid #fff; 
    border-width: 2px 2px 2px; 
    border-color: #8f8f8f; 
    color: #fff; 
} 

Я так же, как образы выстраиваются равномерно, независимо от длины титрах.

Answer 1

Добавить vertical-align:top правило табличных ячеек. Значение по умолчанию - baseline, но вы хотите, чтобы значение было установлено в верхнее.

table td { 
    width: 128px; 
    padding: 0px 10px 0px 10px; 
    vertical-align:top; 
} 

jsFiddle example

Answer 2

По умолчанию ячейки таблицы по вертикали выравниваются по середине. Просто установите их на vertical-align: top, возможно, с дополнительным дополнением.

http://jsfiddle.net/LBb6B/