Moin moin alle zusammen,

Ich bin neu hier im Forum und freue mich an dieser Stelle schonmal auf die zukünftigen Info-Austausch!

Folgendes Problem treibt mich um: Mit ein paar Freunden veranstalten wir ein kleines Festival für das ich gerade eine einfache Homepage baue. In der Liste der teilnehmenden Bands sollen diese in Kacheln jeweils mit Name, Logo und Herkunft dargestellt werden. Das setze ich mit einer <ul> um.

Die einzelnen Kacheln sollen später mal folgendermaßen aussehen:
oben ein <div> mit fester Höhe, darin das Logo vertikal zentriert. Darunter der Name und Herkunft. Klappt aber nicht wie es soll, da das Bandlogo permanent am oberen Rand des divs und damit auch des <li>-Elements liegt.

Der Code sieht so aus:
Und das CSS dazu:

Wie bekomme ich jetzt das Logo-img vertikal in die Mitte des umgebenden <div>?

Schon einmal vielen Dank für eure Antworten!

Hallo

vertical-align funktioniert meiner Kenntnis nach nur in inline-Elementen, inline-block-Elementen und Tabellenzellen.

Gruss

MrMurphy

Hi MrMurphy,

Danke für die Antwort. Wir befinden uns doch aber in einem inline-block oder nicht? Oder muss ich das Logo-umspannende Div auch noch mit display: inline-block versehen?

Hallo,

genau.

Gruss

MrMurphy

Hallo MrMurphy,

Habe ich getan, es ändert sich leider nichts. Weiterhin klebt das Logo-img am oberen Rand des divs. Ich habe es zur Veranschaulichung mal mit einer grellen Hintergrundfarbe gesehen, kann also sicher sagen, dass das div genau die Höhe hat, die es haben soll und dass das entsprechende img oben dran klebt.

Was ist denn da los?

Schöne Grüße,
Kone

Wie siehts mit display: table aus, schon probiert?

Edit: Außerdem gehört vertical-align: middle nicht zum img-Element, sondern in das Eltern-Element.

Moin dazzle89,

Danke für deinen Hinweis, aber das klappt leider auch nicht.
By the way hab ich mal probiert, die Elemente mit dem top-Argument zu verschieben. Dabei bewegen sie sich auch nicht. Nur Styling wie Border oder Background funktionieren. Ich verstehe es nicht!!!

Dann schick mal bitte den angepassten Code von dir.

Mit display: table-cell und vertical-align: middle beim Eltern-Element sollte das eigentlich klappen.

Und die top-Eigenschaft funktioniert nur, wenn das Element absolute, relative oder fixed positioniert ist.

Ich habe mal eine Demo für dich erstellt, die müsste auf deine Bedürfnisse reduziert sein und vielleicht kannst du dich daran orientieren:

https://jsfiddle.net/6ev8hfo8/

Hier siehst du alle Möglichkeiten, wie du etwas horizontal und/oder vertikal zentrieren kannst.
Meine Empfehlung: Verwende Flexbox
Vertical-align hat in dem Sinne, wie du es verwendest, nichts mit vertikalem zentrieren zu tun. Auch wenn es sich schön vom englischen so ins deutsche übersetzen ließe. Es wirkt sich auf die Textposition aus.

Hallo

folgendes sollte funktionieren, wobei die Bildhöhe natürlich kleiner als die divhöhe sein muss:

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