Bilder in tt_news vertikal und horizontal zentrieren

Gewünscht ist, dass bei den dargestellten Einträgen aus tt_news die Bilder verikal und horizontal zentriert werden. Um das Bild herum befindet sich ein Rahmen einer festen Größe mit Schlagschatten. Die Bilder sollen daher wie Polaroids aussehen. Falls kein Bild da ist, dann soll der Text normal über die gesamte Breite fließen.

Wie das geht, wird hier am Beispiel des „latest“-Abschnitts gezeigt. Zunächst modifiziere ich das Template so, dass nur noch das notwendige drinsteht:

Das reicht natürlich nicht, um das Bild so auszurichten, wie es gewünscht ist. Deswegen müssen noch ein paar Hilfs-divs her, diese dürfen aber auch nur dann da sein, wenn auch ein Bild da ist. Daher muss noch ein wenig am Setup geändert werden. Also wird ins TypoScript Setup der Hauptseite die folgende Zeile eingefügt:

plugin.tt_news.displayLatest.imageWrapIfAny =

Falls das Bild als existiert, werden um das Bild herum einige divs gewrappt, diese divs werden dazu benutzt, um das Bild auszurichten. Der Container für das Bild (news-latest-image) wird links positioniert und das Hintergrundbild wird eingefügt. Padding kann da nicht hinzugefügt werden, denn sonst würde der Text ohne Bild nicht über den kompletten Bereich fließen.
Im ersten Hilfs-Wrap wird das padding definiert, damit es keine Browser-Unterscheidung beim Box-Modell geben muss. Im Hilfs-Wrap 2 werden nun alle wichtigen Eigenschaften definiert: die Größe, die Ausrichtung und die Eigentschaft display wird auf table-cell gesetzt. Denn (so die Erklärung) nur innerhalb einer Tabelle können die Inhalte auch vertikal zentriert werden.

Wenn der IE nicht wäre, dann wäre es so weit fertig. Leider zentriert der IE die Bilder immer noch nicht mittig. Die Hilfe gibt es auf der tollen cssplay.co.uk Seite. Da wird das aber über eine zusätzliche Condition gemacht (siehe Quelltext der Seite). Nachdem ich die zwei wraps und die Definition eingebaut habe wie im Beispiel, hat es ohne zusätzliche Abfragen in IE5, IE6, FF und Opera funktioniert.

.news-latest-image {
float: left;
background: transparent url(‚../gfx/tt_news/latest_bg_68x68.gif‘) no-repeat;
}
.news-image-helper {
padding: 5px 10px 25px 5px;
}
.news-image-helper2 {
width: 58px;
height: 58px;
display: table-cell;
text-align: center;
vertical-align: middle;
background-color: white;
}

.news-latest-image .edge {
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
.news-latest-image .container {
text-align:center;
width:100%;
display:inline-block;
vertical-align:middle;
}