Einzelnen Beitrag anzeigen
  #10 (permalink)  
Alt 15.12.2015, 10:35
MrMurphy MrMurphy ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
Sponsored Links