Ich programmiere gerade an einer Seite für meinen Laden und möchte dabei ein "Bio" bzw. "Veggie/Vegan" Siegel über Produktbilder legen lassen die diese Anforderungen erfüllen (Produkte werden aus Datenbank abgefragt).
Wenn ich das reine Produktbild einfüge habe ich keine Probleme, wenn ich aber in eine relative Div-Box die Bilder absolut (übereinander) positionieren lasse wird nicht die Mitte des Bildes auf den Mittelpunkt gelegt, sondern die linke Kante des Bildes. Hab schon alles mögliche in CSS rumprobiert, aber nichts hat geholfen.
Wenn ich den text-align von Center auf Left setze werden die Bilder normal am linken Rand positioniert.
Mein (aktueller) Code:
<div style='width:275px; height:225px; padding:5px; margin:-5px 10px 25px 10px; background-color:#CECECE; float:left; text-align:center; position:relative;'>
<table style='height:225px; width:275px; text-align:center;'>
<tr style='height:175px; width:275px;'>
<td style='vertical-align:top; width:275px;'><img src='images/produkte/$pbild' alt='$pname' title='$pname' style='max-width:270px; max-height:175px; position: absolute; margin-left:auto; margin-right:auto; display:inline-block;'>
<img src='images/bio.png' class='after' style='width:40px;' alt='$pname' title='$pname'></td></tr>
<tr><td>VARIABLE FÜR NAME</td></tr>
<tr><td>VARIABLE FÜR PREIS</td></tr>
</table>
</div>Und ja, da sind gerade veraltete Tabellen drin weil ich am verzweifeln bin und alles probiert habe (Figure, margin auf auto setzen und vieles mehr) und erhofft hatte das es so vielleicht funktioniert wie es soll 
Hier ist ein Bild wie es aktuell aussieht damit ihr sehr was ich meine, eigentlich sollte das Bild im grauen Feld zentriert dargestellt werden.
html-seminar.de/woltlab/attachment/2331/
Vielen Dank im voraus für eure Anregungen um das Problem zu lösen.