So sieht mein Code aus.
HTML
%Vor%CSS
%Vor%Wie der Titel sagt, möchte ich die ul vertikal innerhalb des div zentrieren. Ich kann die obigen CSS-Regeln nicht ändern, weil. Ich habe Lösungen gegoogelt und versucht, einen Weg zu finden, aber alles scheint mit den Regeln zu kollidieren, die ich bereits habe.
Irgendeine Idee, wie man das macht?
Wäre es hilfreich, wenn ich anstelle von #container div eine Tabelle mit einer Zeile und Spalte verwende?
"Zentrieren" eines div oder anderer Container vertikal ist ziemlich schwierig in CSS, hier sind Ihre Optionen.
Sie kennen die Höhe Ihres Containers
Wenn Sie die Höhe des Containers kennen, können Sie Folgendes tun:
%Vor% Wir platzieren also im Wesentlichen in der Mitte und versetzten es dann mit einem negativen Rand, der der Hälfte der Höhe entspricht. Ihr übergeordneter Container muss position: relative haben.
Sie kennen die genaue Höhe Ihres Containers nicht
In diesem Fall müssen Sie JavaScript verwenden und die entsprechenden Ränder berechnen (leider können Sie margin-top: auto oder etwas ähnliches nicht verwenden).
Jetzt können Sie den übergeordneten Container anzeigen lassen: flex und align-items: center. Das sollte funktionieren. Die Flexbox Eigenschaften werden von älteren Browsern nicht unterstützt.