How to Align Button in Center or Right Using Ionic Framework

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

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

How to center an ion-button in ionic 4?

You should use the GRID system from Ionic to structure and align content in your application. Plus take a look at CSS Utilities to use proper build-in CSS styles.

https://ionicframework.com/docs/api/grid

https://ionicframework.com/docs/layout/css-utilities

<ion-grid>
  <ion-row class="ion-align-items-center">
    <ion-col size="12" class="ion-text-center">
      <ion-item lines="none" id="projectTitle" *ngIf="nextOptions == 'previous'">
        <ion-input name="title" [(ngModel)]="title" class="text-input" placeholder="Project Title"></ion-input>
      </ion-item>
    </ion-col>
    <ion-col size="12" class="ion-text-center">
      <ion-button (click)="nextOption()" fill="clear">
        <span *ngIf="!title">maybe later</span>
        <span *ngIf="title">next</span>
      </ion-button>
    </ion-col>
  </ion-row>
</ion-grid>

Align buttons in ionic

You can achieve this using Grid, ionic provide it grid link

It is based on a 12 column layout with different breakpoints based on the screen size.

By default, columns will take up equal width inside of a row for all devices and screen sizes.

<ion-grid>
  <ion-row>
    <ion-col>
      1 of 2
    </ion-col>
    <ion-col>
      2 of 2
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      1 of 3
    </ion-col>
    <ion-col>
      2 of 3
    </ion-col>
    <ion-col>
      3 of 3
    </ion-col>
  </ion-row>
</ion-grid>

Set the width of one column and the others will automatically resize around it. This can be done using our predefined grid attributes. In the example below, the other columns will resize no matter the width of the center column.

<ion-grid>
  <ion-row>
    <ion-col>
      1 of 3
    </ion-col>
    <ion-col col-8>
      2 of 3 (wider)
    </ion-col>
    <ion-col>
      3 of 3
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      1 of 3
    </ion-col>
    <ion-col col-6>
      2 of 3 (wider)
    </ion-col>
    <ion-col>
      3 of 3
    </ion-col>
  </ion-row>
</ion-grid>

So you also can 3 buttons in left,center and right. i.e. First button in left, second in center and third one in right using grid.

 <ion-grid>
    <ion-row>
      <ion-col col-4>
        <button ion-button>
          First
        </button>
      </ion-col>

      <ion-col col-4>
        <button ion-button>
          Second
        </button>
      </ion-col>

      <ion-col col-4>
        <button ion-button>
          Third
        </button>
      </ion-col>
    </ion-row>
  </ion-grid>

Ionic Framework Center button within ionic item

Ionic provides a set of utility attributes that can be used on any element in order to modify the text or adjust the padding or margin.

Read - Ionic CSS Utilities

you can use text-center

The inline contents are centered within the line box.

Try like this'

<ion-list >    
  <ion-item  text-center ><button ion-button (click)="gotoPage1(); ">Go page 1</button></ion-item>
  <ion-item text-center><button ion-button (click)="gotoPage2()">Go page 2</button></ion-item>
  <ion-item text-center><button ion-button (click)="gotoPage3()">Go page 3</button></ion-item>

</ion-list>

stackblitz - code

right alignment for a button in ion-col

In your case you can add the attribute float-right like so:

<button ion-button float-right>My button</button>

float-{modifier}

The documentation says you can add the attribute float-{modifier} to position an element inside its container.

{modifier} can be any of the following:

right: The element will float on the right side of its container.

left: The element will float on the left side of its container.

start: The same as float-left if direction is left-to-right and float-right if direction is right-to-left.

end: The same as float-right if direction is left-to-right and float-left if direction is right-to-left.

Example:

<div>
    <button ion-button float-right>My button</button>
</div>

item-{modifier}

To position an element inside an ion-item the documentation says you can use item-{modifier}.

Where {modifier} can be any of the following:

start: Placed to the left of all other elements, outside of the inner item.

end: Placed to the right of all other elements, inside of the inner item, outside of the input wrapper.

content: Placed to the right of any ion-label, inside of the input wrapper.

Example:

<ion-item>
    <button ion-button item-end>My button</button>
</ion-item>

Deprecation

According to the documentation these names are deprecated:

item-right & item-left

The new names are :

item-start & item-end
padding-start & padding-end
margin-start & margin-end
text-start & text-end
start and end for FABs