Ionic grid alignment row and column with column offset - ionic-framework

Question

I have the following content in ionic.
<ion-content>
<div class="row row-center">
<div class="col-150 col-offset-50"><h4>Login</h4></div> </div>
<div class="row">
<div class=" col-10 col-offset-50"><h4>Username</h4></div>
<div class=" col-10 col-offset-5"><label class="item item-input">
<input type="text" placeholder="Username" ng-model="username">
</label></div>
</div>
<div class="row row-bottom">
<div class=" col-10 col-offset-50"><h4>Password</h4></div>
<div class=" col-10 col-offset-5"><label class="item item-input">
<input type="password" placeholder="Password" ng-model="password">
</label>
</div>
</div>
</ion-content>
The output looks like this:
I am new to ionic and would really appreciate some help in
1)space between the two rows for username and password
2)Aligning both the username and password rows a little more to the left so that the Login row looks centered.

Answer 1

Why don't you use inline labels?
To align all labels to center, add text-center class to your labels.
<ion-content>
<div class="list">
<label class="item item-input">
<span class="input-label text-center">Login</span>
</label>
<label class="item item-input">
<span class="input-label text-center">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label text-center">Password</span>
<input type="password">
</label>
</div>
</ion-content>
To centrally align just 'Login' label, add text-center just to that label
<ion-content>
<div class="list">
<label class="item text-center">
Login
</label>
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password">
</label>
</div>
</ion-content>
To add space between items, add margin-bottom to .input-label class. Don't do this in the original ionic css file - create another stylesheet to contain all your overrides.