Alignment issue

[mort]

Hey all, am making a picture gallery, and have laid it out in 4 columns for images, given each image a container using list items etc.

 

Anyways its fixed size, and the image will either be max height or width as 150px so at least one dimension of the thumbnail will fit the container.

 

Basically at the mo I have all images in top left of the container, so all landscape images have space underneath, and all portrait images have space to the right. I need them to be middle / center.

 

HTML

<ul class="gallery">
<li><a href="index.php?view=view_image&img=25"><img src="thumbimage.php?img=25" width="150" height="120" border="0"></a></li>
</li>

 

CSS

.gallery{
margin:0; padding:0;
overflow:hidden;
width:100%;
list-style:none;
}
.gallery li{
float:left;
display:inline;
width:23.8%;
margin:0 0 10px 1%;
padding:10px 0;
height:158px;
position:relative;
}
.gallery a,
.gallery img{
display:block;
}

a img{ border:none; }

.gallery a:link,
.gallery a:visited,
.gallery a:focus,
.gallery a:hover,
.gallery a:active{
padding:3px;
background:#eeefef;
width:150px; height:150px;
border:1px solid #c2c3c3;
margin: auto auto auto auto;
}
.gallery a:hover{
border-color:#ff0000;
}

.gallery{
border-bottom:2px solid #000;
padding-bottom:10px;
margin-top:10px;
}

 

Can someone point me in the right direction? My brain is dead from coding layout + image database stuff today 

[mort]

Live link here as an example - http://mort.86degrees.com/sites/gallery/index.php?view=gallery2

 

Have fixed the portrait images so they horizontally align, but the landscape ones are all still at the top of their containers

 

Any ideas?