Vertikální zarovnání

Zdravim,

mám v divu obrázek a chci ho zarovnat horizontálně na střed. To je v pohodě, ale jak ho mám zarovnat vertikálně dolů aby to fungovalo i v IE?

Position absolute ti zruší text align center. Příklad:

<div class="product-img">
<a href=""><img src="img/obrazek.png" alt="" /></a>
</div>

a k tomu:
.product-img{width: 151px; height: 150px; text-align: center; border: 1px solid black;position:relative;}
.product-img img{position: absolute; bottom: 0;}

=> to je blbost

Zkoušel jsem i Plaváčkovo řešení:

<div class="product-img">
<div>
<p>
<a href=""><img src="img/obrazek.png" alt="" /></a>
</p>
</div>
</div>

.product-img{width: 151px; height: 150px; text-align: center; border: 1px solid black;position:relative;display: table-cell;vertical-align: bottom;}
.product-img img{position: relative; margin: 0 auto;display: block;position:relative;left: 0;margin: 0 auto;}
.product-img div p {padding: 0;}

a pro IE:
div.product-img div.image div {width: 100%; position:absolute;top: 50%;left: 0;}
div.product-img div p { position: relative;top: -50%}

z odkazu http://klient.plavacek.net/centrovani.html ale nepodařilo se mi to předělat aby to fungovalo všude.
ale v IE to prostě nefunguje....

Nemůžu protože se vedle sebe bude vypisovat sousta dalších obrázků. Nemůžu ve výpisu obrázků dávat každý obrázek do pozadí. Musí tam být jako každý obrázek sám o sobě <img...... />

Existuje nějaký způsob jak takhle zarovnat klasicke elementy?

No už jsem na to přišel.

<div class="product-img">
<a href=""><img src="img/obrazek.png" alt="nazev obrazku" /></a>
</div>

/* obecne styly */
.product-img{width: 151px; height: 150px; text-align: center;position:relative;display: table-cell;vertical-align: bottom;}
.product-img img{position: relative; margin: 0 auto;display: block;left: 0;margin: 0 auto;}

/* jen pro IE */
.product-img{position: relative;}
.product-img a{position: absolute;bottom: 0;}
.product-img img{left: -50%; position: relative;}