MaterializeCSS

Vertical Align

Se puede centrar elementos facilmente aplicando la clase .valign-wrapper en el contenedor que se desea alinear verticalmente

This should be vertically aligned

<div class="valign-wrapper blue lighten-3" style="height:200px;">
    <h5>This should be vertically aligned</h5>
</div>

Text Align

Estas clases son para alinear horizontalmente contenido: .left-align, .right-aligny .center-align.

This should be left aligned

This should be right aligned

This should be center aligned

<div class="blue lighten-3" style="height:200px;">
    <h5 class="left-align">This should be left aligned</h5>
</div>
<div class="blue lighten-3" style="height:200px;">
    <h5 class="right-align">This should be right aligned</h5>
</div>
<div class="blue lighten-3" style="height:200px;">
    <h5 class="center-align">This should be center aligned</h5>
</div>

Quick Floats

Flotar rápidamente las cosas mediante la adición de la clase lefto rightal elemento. !importantse utiliza para evitar problemas de especificidad.

Izkierda...

...Derecha

<div class="left">Izkierda...</div>
<div class="right">...Derecha</div>

Hiding/Showing Content

Proporcionamos clases fácil de usar para ocultar / mostrar contenido en tamaños de pantalla específicos.

Clase	Rango de la pantalla
`.hide`	Oculta para todos los dispositivos
`.hide-on-small-only`	Ocultos Solo para móviles
`.hide-on-med-only`	Escondido para Tablet Sólo
`.hide-on-med-and-down`	Escondido para Tablet y Abajo
`.hide-on-med-and-up`	Escondido para Tablet por encima del promedio
`.hide-on-large-only`	Oculto durante Sólo escritorio
`.show-on-small`	Mostrar Solo para móviles
`.show-on-medium`	Mostrar Sólo para Tablet
`.show-on-large`	Mostrar por Sólo escritorio
`.show-on-medium-and-up`	Mostrar por encima de la tableta y
`.show-on-medium-and-down`	Espectáculo para la tableta y Abajo

Formatting

Estas clases ayudan a dar formato a diversos contenidos en su sitio.

Truncation

Para truncar las líneas largas de texto en una elipsis, añadir la clase truncatea la etiqueta que contiene el texto. Ver un ejemplo a continuación de una cabecera que se trunca dentro de una tarjeta.

This is an extremely long title that will be truncated

<div class="card">
    <h5 class="truncate">This is an extremely long title that will be truncated</h5>
</div>

Hover

La clase .hoverable añade una sombra de animacion a la caja. Fue diseñado para las card pero funciona en casi todos los elementos

Hoverable Card Panel

<div class="card-panel hoverable"> Hoverable Card Panel</div>

Browser Defaults

Debido a que sobreescribimos muchos de los estilos por defecto del navegador y elementos, proporcionamos la clase .browser-default que se encarga de revertir estos elementos a su estado original.

Name of Element	Reverted Style
UL	Bullet points	Elemento Materialize Elemento nativo
SELECT	Browser default select element
INPUT	Browser default input

Name of Element

Reverted Style

UL

Bullet points

Elemento Materialize

Elemento nativo

SELECT

Browser default select element

INPUT

Browser default input

Alignment