Wie können Elemente in Bulma vertikal zentriert werden?
Wie kann ich diesen <div class="columns is-vcentered"> vertikal auf den rot eingefärbten Bereich zentrieren?
Und sollte ich hier einige Klassen entfernen oder hinzufügen, um diesen Code zu verbessern? Bitte schlage mich vor. Danke!
Ich bin neu im CSS Framework, habe nie Bootstrap ausprobiert und stattdessen Bulma gewählt.
Abgesehen von Farbelementen habe ich das nur in CSS getan:
%Vor%2 Antworten
Ich denke, es ist ein bisschen witzig, dass .columns standardmäßig nicht display:flex; hat (sollte es das vielleicht haben?). Wie auch immer, wenn du etwas verwendest, das Flex hinzufügt, zum Beispiel:
Dann erhalten Sie display:flex von is-desktop und jetzt funktioniert is-vcentered wie beabsichtigt.
Ich glaube auch, dass die Semantik deaktiviert ist, da is-vcentered darauf hinweist, dass columns vertikal zentriert wird. Aber was es tatsächlich macht (von der Quelle):
soll Kinder von columns vertikal in columns zentrieren lassen. Daher müssen Sie wahrscheinlich auch eine Höhe Ihres Elements columns festlegen, damit dies funktioniert.
Ich denke, is-vcentered sollte so etwas wie has-vcentered-content heißen, aber vielleicht fehlt mir etwas Offensichtliches.
tl; dr; Fügen Sie dem columns -Element für is-vcentered Höhe und Flex hinzu, um etwas zu tun.
Tut mir leid, ich denke, das ist eher eine Extrapolation des Problems und keine Lösung.
Ich glaube, die wirkliche Lösung ist wahrscheinlich, die vorhandene Heldenklasse hier zu verwenden. (Was übrigens manuell mit Padding zentriert wird, genau wie in Peter Legers Antwort!).
Die Spalten sind nicht vertikal zentriert, weil Sie eine Höhe für den Abschnitt verwendet haben. Verwenden Sie padding , um die Höhe zu erhöhen.
Entfernen Sie die Klasse .section (in Bulma)
und verwenden Sie Ihre eigene Auffüllung.
Beispiel
POSTSCRIPT
Sie können .columns is-vcentered zweimal verwenden. In diesem Fall können Sie eine Höhe für den Abschnitt festlegen.