CODEWITHSUNDEEP
ionic-frameworkbutton
CK8
CK8

Reputation: 359

Ionic Framework Center button within ionic item

I am using ionic framework. The following code make the buttons align left. I would like to make the buttons align center. How can I do that ? Thanks 

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

</ion-list>

Upvotes: 1

Views: 5649

Answers (4)

Fahimeh Ahmadi
Fahimeh Ahmadi

Reputation: 1029

Ionic Framework Center button within ionic item I used this method

<ion-grid>
       <ion-row>
         <ion-col size="12" class="ion-text-center">
          <ion-button>
            Login
          </ion-button>
         </ion-col>
       </ion-row>
   </ion-grid>

Upvotes: 0

Robert Smith
Robert Smith

Reputation: 634

The current answer (Ionic 4) requires that in addition to using text-center, your wrap the buttons in a label. This works correctly:

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

Upvotes: 3

core114
core114

Reputation: 5325

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

Upvotes: 2

Gary Gro&#223;garten
Gary Gro&#223;garten

Reputation: 1592

You can use ionic's text-center CSS Utility. See https://ionicframework.com/docs/theming/css-utilities/

Example Usage:

<ion-item text-center>
  <button ion-button>click me</button>
</ion-item>

If you don't want the whole item content to be centered you can use css to center just the button.

e.g. wrapping the button with a text-center wrapper div inside the ion-item

Upvotes: 0

Related Questions