Ich habe eine Reihe von Elementen in einem Elternelement. Die Höhe des übergeordneten Elements kann sich ändern (es wird von einigen jQuery-Dateien geändert). So sieht das Layout aus:
%Vor%Ich möchte, dass die Child-Elemente in der Mitte des Eltern-Divs ausgerichtet werden, aber ich kann nicht herausfinden, wie ich das CSS dazu schreiben soll. Ich habe versucht, Dinge zu schreiben wie:
%Vor%Was nicht funktioniert. Ich habe es auch versucht:
%Vor%Das funktioniert auch nicht. Irgendwelche Ideen wie man das macht?
Überprüfen Sie diesen Link: Ссылка
Dies bringt die Obergrenze Ihres Kindes auf 50% des Containers. Fügen Sie einfach margin-top hinzu: - (x) px; wo (x) ist die Hälfte der Höhe Ihres Kindes div.
Sie können einen Wrapper für die Elemente erstellen, die Sie in einem Container zentrieren möchten, der stattdessen zentriert wird:
HTML
%Vor%Dann können Sie das einfach tun:
CSS
%Vor%Demo . Methode gefunden bei CSS-Tricks .
Dies ist etwas komplizierter als Ihr Standard "Wie ordne ich ein einzelnes div in einem übergeordneten Container vertikal an?"
Wenn Sie mehrere Elemente haben (die sich ändern können), die vertikal ausgerichtet werden müssen oder sich die Höhe des übergeordneten Containers ändert, müssen Sie die Position mit Javscript / JQuery festlegen, da es keinen Standard gibt "Möglichkeit, eine mittlere vertikale Ausrichtung auf mehrere untergeordnete Elemente in einem übergeordneten Container anzuwenden, indem nur CSS verwendet wird. BEARBEITEN: Ich habe bewiesen, dass Sie falsch sind, Sie können anscheinend mit: vor Pseudo-Element, aber es wird nicht funktionieren in IE7, wenn Sie es herumhacken.
Ich habe das in einer Geige umgesetzt: Ссылка
Wichtige Teile
position:relative . Dies ist wichtig, da bestimmte untergeordnete Elemente eine variable Höhe haben können. Dadurch entfällt die Notwendigkeit, die obere Position für jedes Element separat zu berechnen. Sie haben vergessen, das gleiche Styling auf child2 wie auf child1 anzuwenden:
%Vor%Hier ist ein Spiel: Ссылка