Vertical Alignment in <li> elements

I'm using an unordered list to create a pseudo-table that will have different amounts of cells per row based on the browser window size. Since I want to use the "table" as an image gallery, I'd like the images to be centered vertically in the "cells". I have tried this (http://www.jakpsatweb.cz/css/css-vertical-center-solution.html) method with no luck. If anyone is able to figure this out or another way I could get the same results using a different method it would be much appreciated.

The page can be found here: http://activities.fit.edu/aiaa/Test/FITUltimate/photos.htm

The CSS for the image gallery is:

#pics {
display: table;
width: 97%;
padding: 0 auto 0 auto;
margin: 10px auto 10px auto;
border: 2px solid #C8CDD2;
}
#pics ul {
padding: 0;
list-style: none;
}
#pics li {
float: left;
width: 160px;
height: 160px;
margin: 2px;
border: 1px solid #CCCCCC;
}
#pics a img {
display: block;
border: none;
margin-left: auto;
margin-right: auto;
background: #CCFF00;
}


Thanks a lot

Goodmorning NewbNeedHelp,
Your site is a perfect candidate for an image presentation project I have been working on. Have a look at this. (http://www.nopeople.com/CSS/thumbnail%20presentation/)

The more pics you add the better you'll appreciate what it's doing.

That's pretty much exactly what I wanted to do. Although I'm partial to lists, the coding you use is still extremely simple. Thanks.