Bild innerhalb von Link zentrieren

[Christian]

Hallo,
ich möchte eine Galerie anstatt mit einer Tabelle mit Hilfe von CSS gestalten. Bisher habe ich folgendes versucht:

HTML:
<div class="Galerie">
<a href="#"><img src="Bild1.jpg"></a>
<a href="#"><img src="Bild2.jpg"></a>
...
...
</div>

CSS:
.Galerie a {
        display:table-cell;
        width: 130px;
        height: 130px;
        padding:0px;
        margin:100px;
        background-image: url(bg.gif);
        border: none;
        text-align: center;
        vertical-align: middle;}

.Galerie img {border:none;}

---------------------------------------

Nun tauchen folgende Probleme auf:

1. Das Bild wird im Internet Explorer zwar horizontal zentriert, vertikal jedoch oben ausgerichtet, obwohl vertical-align ja auf middle steht.

2. Firefox und Opera ignorieren die margin Angabe, die Elemente werden einfach direkt aneinander gereiht.

Und dann habe ich noch eine Frage:

Wie kann ich die Anzeige der Bilder auf eine bestimmte Breite beschränken? Ich habe bisher versucht die Breite von .Galerie in % oder auch Pixeln festzulegen, was leider nicht geklappt hat.

Weiß jemand eine Lösung für die Probleme oder würdet ihr das alles komplett anders machen??

Danke,
Christian

[MudGuard]

Hi,

1. Das Bild wird im Internet Explorer zwar horizontal zentriert, vertikal jedoch oben ausgerichtet, obwohl vertical-align ja auf middle steht.

Der IE kennt table-cell nicht.
vertical-align kann damit keine Auswirkung haben ...

2. Firefox und Opera ignorieren die margin Angabe, die Elemente werden einfach direkt aneinander gereiht.

Klar. Die kennen ja auch table-cell.
Und tabelleninterne Elemente (table-cell, table-row usw.) haben keinen margin.

Wie kann ich die Anzeige der Bilder auf eine bestimmte Breite beschränken? Ich habe bisher versucht die Breite von .Galerie in % oder auch Pixeln festzulegen, was leider nicht geklappt hat.

Alle direkt aufeinanderfolgenden Elemente mit table-cell werden bei Fehlen einer explizit angegebenen table-row implizit zu einer einzigen table-row zusammengefaßt ...

cu,
Andreas

[Christian]

Hi,
danke für deine Antwort. Das IE table-cell nicht interpretiert habe ich in SELFHTML wohl überlesen... Das sie kein margin haben wusste ich nicht. So wie ich es wollte scheint es also nicht zu gehen...
Hat jemand einen Vorschlag, wie man das anderweitig lösen könnte?

Danke,
Christian