Horizontalen und vertikalen Mitte der Karte im material-design lite(MDL)

Ich versuche, mich zu zentrieren Sie die Karte vertikal und horizontal in der Mitte der Seite. Ich bin in der Lage, um den Mittelpunkt der Karte horizontal. Aber nicht in der Lage, um es als vertikal. Ich habe nicht gefunden alle Klassen in MDL vertikal zentrieren Sie die Karte.

Code für center horizontal

<div class="mdl-grid">
            <div class="mdl-cell mdl-cell--3-col">
                <!-- this is just dummy columns -->
            </div>
            <div class="mdl-cell mdl-cell--6-col">
                <figure >
                    <div class="mdl-card mdl-shadow--6dp">
                        <div class="mdl-card__title mdl-color--primary mdl-color-text--white">
                            <h2 class="mdl-card__title-text ">Sign in</h2>
                        </div>
                        <div class="mdl-card__supporting-text">
                                                            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                <input class="mdl-textfield__input" id="login"/>
                                <label class="mdl-textfield__label" for="login">User Name</label>
                            </div>
                            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                <input class="mdl-textfield__input" type="password" id="password"/>
                                <label class="mdl-textfield__label" for="password">Password</label>
                            </div>
                        </div>

                        <div class="mdl-card__actions mdl-card--border">
                            <div class="mdl-grid">
                                <button class="mdl-cell mdl-cell--12-col mdl-button mdl-button--raised mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-color-text--white">
                                    Sign in
                                </button>
                            </div>
                        </div>
                    </div>

                </figure>
            </div>
            <div class="mdl-cell mdl-cell--3-col">
                <!-- this is just dummy columns -->
            </div>
        </div>

Den oben genannten code, nur zentrieren Sie die Karte horizontal. Ich will zentrieren Sie die Karte vertikal als auch.

Wie kann ich erreichen, das in der MDL-Klasse.

InformationsquelleAutor San Jaisy | 2017-12-13



One Reply
  1. 3

    Wenn du glücklich bist, mit CSS und nicht abhängig von MDL Klassen, die Sie tun können diese mit flexbox-sehr leicht:

    body {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    Aber im Allgemeinen ist es besser, erstellen Sie ein wrapper-element und nicht die Einstellung dieser Stil am Körper ..es sei denn dies ist das einzige element auf der Seite, wie ich denke, es könnte auf einem Schild auf der Seite.

    Für eine version verwendet, die eine wrapper-statt siehe die aktualisierte Geige, die ich umwickelt habe die mdl-raster mit dem wrapper und Hinzugefügt height: 100vh zu den wrapper-styling:

    https://jsfiddle.net/baouvnnx/6/

    • Ist Ihr jede Klasse im MDL-center-horizontal und vertikal-Karten
    • hmm nicht sicher, ich benutze materialisieren manchmal hat valign-wrapper materializecss.com/helpers.html
    • können Sie erstellen einen Stift oder Geige?
    • hier ist der link jsfiddle.net/anandjaisy/baouvnnx/3
    • ok ich habe meine Antwort aktualisiert
    • Ist Ihre Alternative Möglichkeit, statt Körper
    • wenn meine Antwort Ihnen geholfen hat, bitte upvote und es akzeptieren

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.