Da das Grid-System von Milligram auf Flexboxen basiert, ist es schwierig, Utility-Klassen zu implementieren, um einige Dinge vertikal auszurichten? Bitte, es ist 2k16!
Hallo @neronmoon
Du hast Recht, es ist 2016! Milligram verwendet Flexbox im Rastersystem. Verwenden Sie für die vertikale Ausrichtung diese Klassen:
.row-top
, .row-bottom
, .row-center
, .row-stretch
, .row-baseline
.
Lassen Sie es mich wissen, wenn Sie noch Zweifel an der vertikalen Ausrichtung haben.
Hey @neronmoon Vorerst schließe ich diese Ausgabe. Fühlen Sie sich frei, wieder zu öffnen, wenn dies für Sie nicht ausreicht.
@cjpatoilo was ist die empfohlene Methode, diese zu verwenden?
Ich habe versucht, dies in Ihrem Beispielraster zu verwenden, wie unten gezeigt, aber nichts zentriert.
<div class="row row-center">
<div class="column column-10">
<span class="column-demo">10%</span>
</div>
</div>
Haben Sie in diesem Zusammenhang eine empfohlene Methode, das einzige Ding in einer Reihe zu zentrieren?
<div class="row">
<button>Some Button Text</button>
</div>
Dafür habe ich margin: 0 auto
. Das einzige Problem ist jedoch, dass Zeilen einen negativen Rand haben, was bedeutet, dass alles nach links verschoben ist.
Um vertikal auszurichten, muss flexbox height: 100%;
auf dem übergeordneten Element haben. In diesem Fall müssen Sie html
, body
, .container
und .row
einstellen
html,
body,
.container,
.row {
height: 100%;
}
Dann funktioniert das .row-center
.
Hilfreichster Kommentar
Um vertikal auszurichten, muss flexbox
height: 100%;
auf dem übergeordneten Element haben. In diesem Fall müssen Siehtml
,body
,.container
und.row
einstellenDann funktioniert das
.row-center
.