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">
<form action="#">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="username"/>
<label class="mdl-textfield__label" for="username">Username</label>
</div>
</form>
</div>
<div class="mdl-layout-spacer"></div>
</div>
|
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.
Advertisements
