Hallo,
für eine Bildergalerie habe ich kleine Vorschaubilder, die ich folgendermaßen anzeige:
<p><a href="p1.html"><img src="P1.JPG" alt=""></a><a href="p2.html"><img src="P2.JPG" alt=""></a>...</p>
Da ich Bilder im Hoch- und im Querformat habe, ergibt sich eine etwas unruhige Ansicht. Daher dachte ich mir, den A-Elementen eine feste Höhe und Breite zu geben und die Bilder darin horizontal und vertikal zu zentrieren. Meine CSS-Entwirf dazu:
a { display:block;width:180px;height:180px;float:left;border:1px solid black;padding:0px;margin:5px;
text-align:center;font-size:180px;line-height:180px }
img { border:none;vertical-align:middle }
Leider führt dieses nur im IE zum gewünschten Ergebnis, im Opera (8) sind die Bilder etwas zu tief, im FF viel zu tief angeordnet.
Eine starre Positionierung über margin oder padding ist nicht möglich, da die Vorschau mit einem kleinem C-Programm automatisch erstellt wird und nicht bekannt ist, welche Bilder im Hoch- oder Querformat sind.
Hat daher irgendjemand eine Idee, wie ich die Bilder auch im FF zentriert bekomme?
Gruß, Jürgen
PS
Mir ist natürlich klar, dass man bei so einer Frage sofort in die FAQ und ins Archiv geschickt wird. Ich war natürlich auch dort und habe neben vielen Verweisen auf das Archiv die Inspiration zu obiger Lösung gefunden sowie Lösungen mit "display:table ...", die aber vom IE ignoriert werden.