How can I align button in Center or right using IONIC framework?

enter image description here

I want the login and register button in right,and Search button in Center, I searched alot but didn't get any solution.

And also how can I align text area in a proper position.

Here is my html code:

<body ng-app="starter">

    <ion-pane  style = "background-color:#4992E2;">
      <ion-header-bar class="bar bar-subheader" style = " margin-top: -35px; background-color:#F9F9F9;">
        <h1 class="title" style = "color:black;">NetHealth Appointment Booking</h1>
      </ion-header-bar>
      <ion-content >
          <div class = "row center">
               <div class="col">
                    <button class="button button-small  button-light" >
                      Login!
                    </button>
                     <button class="button button-small  button-light">
                      Register Here!
                    </button>
                </div>
          </div>
          <div class="item-input-inset">
            <h4>Date</h4> 

          <label class="item-input-wrapper">
                <input type="text" placeholder="Text Area">
          </label>
        </div>
        <div class="item-input-inset">
            <h4>Suburb</h4>

          <label class="item-input-wrapper">
                <input type="text" placeholder="Text Area">
          </label>
        </div>
        <div class="item-input-inset">
            <h4>Clinic</h4>
          <label class="item-input-wrapper">
                <input type="text" placeholder="Text Area">
          </label>
        </div>
        <button class=" center button button-small  button-light">
          Search
        </button>

        </ion-content>
    </ion-pane>
  </body>

I know in the bootstrap, but I am new to ionic, please tell me how can I do this.

You should put the button inside a div, and in the div you should be able to use the classes:
text-left, text-center and text-right.

for example:

<div class="row">
   <div class="col text-center">
      <button class="button button-small button-light">Search</button>
   </div>
</div>

And about the "textarea" position:

<div class="list">
<label class="item item-input">
    <span class="input-label">Date</span>
    <input type="text" placeholder="Text Area">
</label>

Demo using your code:
http://codepen.io/douglask/pen/zxXvYY

Css is going to work in same manner i assume.

You can center the content with something like this :

.center{
     text-align:center;
}

Update

To adjust the width in proper manner, modify your DOM as below :

<div class="item-input-inset">
    <label class="item-input-wrapper"> Date
        <input type="text" placeholder="Text Area" />
    </label>
</div>
<div class="item-input-inset">
    <label class="item-input-wrapper"> Suburb
        <input type="text" placeholder="Text Area" />
    </label>
</div>

CSS

label {
    display:inline-block;
    border:1px solid red;
    width:100%;
    font-weight:bold;
}

input{
    float:right; /* shift to right for alignment*/
    width:80% /* set a width, you can use max-width to limit this as well*/
}

Demo

final update

If you don't plan to modify existing HTML (one in your question originally), below css would make me your best friend!! :)

html, body, .con {
    height:100%;
    margin:0;
    padding:0;
}
.item-input-inset {
    display:inline-block;
    width:100%;
    font-weight:bold;
}
.item-input-inset > h4 {
    float:left;
    margin-top:0;/* important alignment */
    width:15%;
}
.item-input-wrapper {
    display:block;
    float:right;
    width:85%;
}
input {
    width:100%;
}

Demo