Hallo
Zitat:
aber das klappt leider auch nicht
|
folgendes sollte funktionieren, wobei die Bildhöhe natürlich kleiner als die divhöhe sein muss:
Code:
.listlogo {
height: 150px;
display: table-cell;
vertical-align: middle;
}
Die CSS-Anweisung
vertical-align wird leider häufig ungenau beschrieben. Darauf bin ich auch hereingefallen und habe es nicht bemerkt, da ich die Eigenschaft selbst noch nie angewandt habe.
Das habe ich erst jetzt nach etwas intensiverer Rechere verstanden. Mit
display: inline oder
display: inline-block des umgebenden Elements lassen sich Bilder nicht vertikal ausrichten.
vertical-align funktioniert bei der Ausrichtung eines Bildes nur zusammen mit
display: table oder
display: table-cell.
Intern machen die Browser daraus jeweils vollständige Tabellen mit
table,
table-row und
table-cell. Das ganze Konstrukt verhält sich dann auch wie eine Tabelle mit allen Vor- und Nachteilen.
display: flex ist aktuell die sinnvollste Lösung. Die Eigenschaft ist unter anderem für solche Ausrichtungen eingeführt worden.
Gruss
MrMurphy