Bildposition mit CSS einstellen.

[dodothegoof]

Es geht um die Gestaltung folgender Seite:
http://bbt.rotaract.de/2009EUCO

Wie man sehen kann sie die kleinen Vorschaubilder in den grauen Boxen nicht mittig zentriert, aber das hätte ich gerne.

Die Bildergalerie wurde mit Lightbox erstellt und die Seite wird mit CMS bearbeitet, so dass die Galerie in folgender Weise erzeugt wird.


{PHOTOS:2009_EUCO:100}

Das erzeugt dann einen HTML-Code der so aussieht.

<div class="thumbnails">
<div class="thumbnail">
<a href="/assets/image/2009_EUCO/EUCO09_001.JPG" rel="lightbox[2009_EUCO]"><img src="/assets/image/2009_EUCO/euco09_001.thumb-100.jpg" border="0" /></a>
</div>
...
</div>


Die Definierung der beiden Klassen "thumbnails" und "thumbnail" erfolgt in CSS. Der Code sieht momentan so aus:


thumbnail {margin:0.5em;display:inline-block;Background:#333333;width:100px;height:100px; text-align:center;vertical-align:middle;}
.thumbnail{border:2px solid #333333}
.thumbnail:after {content: "."; display: inline-block; visibility: hidden; line-height:0;height:0;}
div.thumbnails {display:inline-block;text-align:justify;vertical-align:middle;width:100%;}
html[xmlns] .thumbnails {display:block;}
* html .thumbnails {height:1%;}

Was muss ich machen, um die Bilder zu zentrieren?
Für Hinweise was ich aus dem Code rausschmeißen kann, weil doppelt vorhanden, bin ich auch dankbar.

[Pingu]

Um Mittig zu zentrieren, muss der Browser den rechten und den link Rand/Abstand automatisch bestimmen. Also muss man ihm sagen, dass er ihn automatisch bestimmen soll, z.B. mit margin-left: auto; margin-right: auto; oder padding-left: auto; padding-right: auto;