Thumbs im Album ausrichten

[gardapro]

Wie kann ich die Thumbs in der Almumsansicht so ausrichten, dass die Querbilder mittig zu den Hochkanntbildern stehen?

Hier ist eine unschöne Beispielseite .

[cyberman]

Hast du schon versucht, die Außenabstände der Bilder auf auto zu setzen (CSS)?

[gardapro]

Hab ich versucht, bringt aber nichts.

Der Trick mit display: table-cell; funktioniert unter ie8 und FF, aber nich beim ie7oder anderen Browsern...

[mike-r]

Setz mal die line-height auf die Boxenhöhe.
Ich vermute stark, dass durch display:block, der Textfluss einfach "eher" aufhört. Mit einer Zeilenhöhe kannst Du das umgehen, bzw das Gegenteil erzwingen.

[Jos]

Ich habe viel mit google gesucht um dasselbe zu erreichen. Leider nichts gefunden was mit alle Browsern wirkt.

Das einige was ich mir denken kann, ist das Bild mit css als background in eine div einzubinden:

Code: Select all

<div class="albumthumb" style="background-image: url(image.jpg)"> </div>

wobei die div im stylesheet steht wie:

Code: Select all

div.albumthumb {
	width: 120px;
	height: 120px;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: center;
}

[mike-r]

Gerade mal auf Verdacht bisschen rumprobiert:
- line-height auf 110px setzen
- in den Link neben die Grafik ein geschütztes Leerzeichen packen

Bisschen schmutzig, aber geht hier, zumindest in Gecko.

Sauber wirst Du das wahrscheinlich nur mit absoluter Positionierung hinbekommen.
Beispiel: http://www.ulf-theis.de/tutorials/xhtml ... zentrieren oder:
http://www.jakpsatweb.cz/css/css-vertic ... ution.html

P.s. was spricht eigentlich gegen table/table-cell? Dann geht's halt im IE nicht, wie Du wünschst. Die Darstellung ist doch aber trotzdem ok, oder nicht?