Если вам не нужно плавать в li, то вы можете использовать опцию отображения inline-таблицы, чтобы выровнять по вертикали: middle делает свое дело.
Так что css будет выглядеть так для li
ul.photo-grid li {
display:inline-table;
margin: 10px;
height: 250px;
width: 200px;
text-align: center;
vertical-align:middle !important;
}
Что касается IE6 и 7, то они не поддерживают position: table-cell, поэтому вместо этого нужно придать контейнеру следующие стили:
position:absolute;
top:50%;
и затем дайте детям эти стили
position:relative;
top:-50%;
Это должно применяться только к IE6 и 7, поэтому либо добавьте таблицу стилей для этого, либо используйте встроенный #.
Теперь вашему примеру также нужно разместить изображения рядом друг с другом слева, поэтому вам нужно иметь внешний контейнер с:
position:relative;
float:left;
Вы можете использовать ваш 'li' для этого, ваш 'a' для контейнера с вертикальным выравниванием, а также img и span как дочерние (хотя пока только для ie6 и 7).
Я добавил его в вашу скрипку с помощью встроенных селекторов # - http://jsfiddle.net/EAGQH/69/