Wie center vertikal mit Winkel-Flex-Layout?

Ich habe eine einfache login-Komponente und ich würde gerne vertikal-center, aber ich bin mir nicht sicher, wie das zu erreichen ist die Verwendung der Winkel-Flex-Layout-Bibliothek.

app.component.html

<router-outlet></router-outlet>

login.component.html

<div fxLayout fxLayoutAlign="center center">
    <mat-card fxFlex="30%">
        <mat-card-title>Login</mat-card-title>

        <mat-card-content fxLayout="column">
            <mat-form-field>
                <input matInput placeholder="Username">
            </mat-form-field>
            <mat-form-field>
                <input matInput placeholder="Password">
            </mat-form-field>
        </mat-card-content>

        <button mat-raised-button color="accent">Login</button>
    </mat-card>
</div>

Stile.scss

body{
    margin: 0;
    background-color: #eff2f5;
}

screenshot:
Wie center vertikal mit Winkel-Flex-Layout?

InformationsquelleAutor Christian | 2018-01-10
  1. 9

    Vertikal zentrieren Elemente mit flexbox hat keine Wirkung, wenn das container-element die gleiche Höhe wie der Inhalt. Machen die top-level - <div> in Ihrem Beispiel nehmen Sie den gesamten verfügbaren vertikalen Raum mit height: 100% (oder einen anderen Winkel-Flex-Layout-spezifische Lösung, wenn verfügbar - vielleicht fxFlexFill) sollte-center, dessen Inhalt genau dort, wo Sie Sie haben wollen.

    • Ich fügte style="min-height: 100vh"
    InformationsquelleAutor Kaivosukeltaja
  2. 7

    Wenn das übergeordnete element hat ein bekannter Höhe, alles, was Sie brauchen, ist fxLayoutAlign="center center":

    <section class="intro-section">
  <div
   fxLayout="row"
   fxLayout.xs="column" 
   fxFlexFill
   fxLayoutAlign="center center"
  >
    <div fxFlex="50">
      <h1>MAYABI PORTFOLIO MULTIPURPOSE THEME</h1>
      <p>lorem ipsum dolor sit amt, consectet adop adipisicing elit, sed do eiusmod 
teporara incididunt ugt labore.</p>
    </div>
    <div fxLayout="50">
      hello
   </div>
  </div>
</section>

.intro-section {
   height: 500px;
}
    InformationsquelleAutor Ericky
  3. 2

    Müssen Sie die Höhe der fxLayout (Bearbeitet)

    <div fxLayout="row" fxLayoutAlign="center center" class="row-height">
    <mat-card fxFlex="30%">
        <mat-card-title>Login</mat-card-title>

        <mat-card-content fxLayout="column">
            <mat-form-field>
                <input matInput placeholder="Username">
            </mat-form-field>
            <mat-form-field>
                <input matInput placeholder="Password">
            </mat-form-field>
        </mat-card-content>

        <button mat-raised-button color="accent">Login</button>
    </mat-card>
</div>

    CSS

    .row-height {
    height: 100%
}
    InformationsquelleAutor Abhijith
Schreibe einen Kommentar