zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Vertikale Positionierung von Elementen in einer inline-block Liste

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.12.2015, 16:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.12.2015
Beiträge: 5
kone befindet sich auf einem aufstrebenden Ast
Standard Vertikale Positionierung von Elementen in einer inline-block Liste

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:
HTML-Code:
    <ul id="bandlist">
        <li>
            <a href="bands.php?name=bandname">
                <div class="listlogo">
                    <img src="bands/band-logo.jpg" />
                </div>
                <span>Bandname</span>
                <img src="herkunft.jpg" />
            </a>
        </li>
    ...
    </ul>
Und das CSS dazu:

Code:
#bandlist { margin: 0; padding: 0; }
#bandlist li { list-style: none; width: 200px; text-align: center; display: inline-block; background-color: black; padding: 1%; margin: 1%; }

.listlogo { height: 150px; }
.listlogo img { vertical-align: middle; }
Wie bekomme ich jetzt das Logo-img vertikal in die Mitte des umgebenden <div>?

Schon einmal vielen Dank für eure Antworten!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.12.2015, 17:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.071
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

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

Gruss

MrMurphy
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.12.2015, 17:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.12.2015
Beiträge: 5
kone befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #4 (permalink)  
Alt 14.12.2015, 17:09
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.071
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo,

genau.

Gruss

MrMurphy
Mit Zitat antworten
  #5 (permalink)  
Alt 14.12.2015, 17:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.12.2015
Beiträge: 5
kone befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 14.12.2015, 17:35
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

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.

Geändert von dazzle89 (14.12.2015 um 17:38 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 14.12.2015, 20:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.12.2015
Beiträge: 5
kone befindet sich auf einem aufstrebenden Ast
Standard

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!!!

Geändert von kone (14.12.2015 um 20:55 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 15.12.2015, 09:01
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

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/

Geändert von dazzle89 (15.12.2015 um 09:05 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 15.12.2015, 09:06
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.074
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 15.12.2015, 10:35
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.071
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
Antwort

Stichwörter
div, listendarstellung, vertical-align

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Verschiebungen bei größerem Bildschirm seelefant CSS 4 28.07.2014 16:43
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten mazzo CSS 10 05.04.2012 18:32
div als inline Hintergrund auch bei block Elementen css7545 CSS 2 22.06.2009 23:16
display: block und inline maggie CSS 21 05.05.2009 14:24
Liste (inline) Umbruch erzeugen Steakfred CSS 3 09.05.2006 13:27


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:16 Uhr.