Tutorialsplane

Material design lite – Center Aligned form


Material design lite – Center Aligned form : Sometimes you need to keep the form centered aligned in material design lite. There are many ways to align center the data in material design lite. Here we are going to explain how to create a simple form and keep it centered aligned.


Material design lite – Center Aligned form

You can use mdl-layout-spacer for centered align form in material design-

Material design lite – Center Aligned form:

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

</div>
   <div class="mdl-layout-spacer"></div>
</div>

Try it »

The above example creates a form which will be placed in the center of the screen. If you run the above example it will produce the output something like this.

MDL - Faq