web-dev-qa-db-fra.com

Forme centrée avec lite de conception matérielle

Je cherche un moyen facile d'obtenir un formulaire de connexion centré sur l'écran à l'aide de la bibliothèque Material Design Lite de Google.

J'ai parcouru plusieurs itérations et voici le meilleur que j'ai trouvé:

<div class="mdl-cell--12-col mdl-grid">
    <div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-tablet">&nbsp;</div>

    <div class="mdl-grid mdl-cell--4-col">

        <div class="mdl-textfield mdl-js-textfield mdl-cell-12-col">
            <input class="mdl-textfield__input" type="text" id="username" />
            <label class="mdl-textfield__label" for="username">Username</label>
        </div>

        <div class="mdl-textfield mdl-js-textfield mdl-cell-12-col">
            <input class="mdl-textfield__input" type="password" id="password" />
            <label class="mdl-textfield__label" for="password">Password</label>
        </div>
    </div>

    <div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-tablet">&nbsp;</div>
</div>

Existe-t-il un meilleur moyen d'obtenir une forme centrée sur toutes les tailles d'écran?

Les divs avec &nbsp; se sentir vraiment dégoûtant!

htmlcssmaterial-design-lite
36
Clarkie

Pourquoi ne pas utiliser "mdl-layout-spacer": See codepen

<div class="mdl-grid">
    <div class="mdl-layout-spacer"></div>
    <div class="mdl-cell mdl-cell--4-col">This div is centered</div>
    <div class="mdl-layout-spacer"></div>
</div>

Ou si vous préférez une solution CSS: Ajoutez une classe supplémentaire à la grille contenant la colonne à centrer. Voir codepen

<div class="mdl-grid center-items">
    <div class="mdl-cell mdl-cell--4-col">This div is centered</div>
</div>

.mdl-grid.center-items {
  justify-content: center;
}

Les deux options jouent bien lors du redimensionnement.

75
passerby

Vous pouvez utiliser 'mdl-typography--text-center':

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--4-col mdl-typography--text-center">
    My center div
   </div>
</div>
23
Maxxx

Pourquoi ne pas utiliser mdl-cell--N-offset classe? Comme indiqué sur Composants -> Mise en page -> Grille -> Options de configuration dans https://getmdl.io/components/index.html#layout-section/grid :

mdl-cell - N-offset

Ajoute N colonnes d'espaces avant la cellule

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--4-col mdl-cell--4-offset">
    <p>Centered content!</p>
  </div>
</div>

Cela devrait marcher.

15
Pedro Adame Vergara

Ajoutez simplement ces règles CSS:

.mdl-layout {
  align-items: center;
  justify-content: center;
}

puis mettez votre contenu dans ce conteneur:

<div class="mdl-layout">
  <!-- Your Content -->
</div>
7
Paweł Hajduk

Je ne connais pas bien la bibliothèque Material Design Lite de Google, mais pourquoi ne pas créer simplement un élément "conteneur" encapsulant les colonnes? Exemple:

CSS:

.customContainer {
    max-width: 960px;
    margin: 0 auto;
}

HTML:

<div class="customContainer">
    ...
</div>

Ensuite, à partir de là, vous pouvez placer la colonne de largeur complète comme vous le souhaitez.

5
Josh Salazar