When using overflow hidden - how to center an inner image?

on my homepage I display images in a 100px tall DIV. The images are all over 100px+ so I use a div with the CSS property of overflow:hidden to easily trim off the extra pixels.

But the images don't look so good. Is there a way for me the center them vertically? This would make the "trim off" be the same for top and bottom.

http://bill开发者_如何学JAVAetagent.eweb703.discountasp.net/Arrangementer.aspx

thanks!

You could put the image as a background-image on the <a> element with background-position: 50% 50% (centered vertical and horizontal).

<a ... style="background: url() no-repeat 50% 50%;"></a>

(Provided that the images are at least 100px tall. Otherwise they will not align to top top.) (Oh, you've already stated this. Great.)

On the now empty <a> element you can furthermore add display: block; height: 100px to have a clickable area of the same size as the (visible) image.