html - google - material design lite templates

Forma centrada con material design lite

Question

Estoy buscando un formulario de inicio de sesión fácil de usar centrado en la pantalla con la biblioteca Material Design Lite de Google.

He pasado por varias iteraciones y esta es la mejor que he encontrado:

<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>

¿Hay una mejor manera de lograr una forma centrada en todos los tamaños de pantalla?

Los divs con   ¡Siéntete realmente asqueroso!

Answer 1

¿Por qué no usar mdl-cell--N-offset clase mdl-cell--N-offset ? Como se indicó en Componentes -> Diseño -> Cuadrícula -> Opciones de configuración en https://getmdl.io/components/index.html#layout-section/grid :

mdl-cell - N-offset

Agrega N columnas de espacios en blanco antes de la celda

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

Esto debería funcionar.

Answer 2

¿Qué le codepen usar "mdl-layout-spacer": ver el 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>

O si prefiere una solución CSS: agregue una clase extra a la cuadrícula que contiene la columna que se centrará. Ver 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;
}

Ambas opciones funcionan bien al cambiar el tamaño.

Answer 3

No estoy familiarizado con la biblioteca Material Design Lite de Google, pero ¿por qué no simplemente crear un elemento "contenedor" que envuelva las columnas? Ejemplo:

CSS:

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

HTML:

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

Luego, desde allí puede poner la columna de ancho completo como desee.

Answer 4

Puede usar ''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>

Answer 5

Solo agrega estas reglas de CSS:

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

y luego ponga su contenido en este contenedor:

<div class="mdl-layout">
  <!-- Your Content -->
</div>