居中对齐操作表文本和图标

Question

I am trying to centre align the text and icons in action sheet in ionic 3,In the list view its by default aligned to the left. here is my code:

    buttons: [
      { text: 'Delete', role: 'destructive' },
      { text: 'Share' },
      { text: 'Play' },
      { text: 'Favorite' },
      { text: 'Cancel', role: 'cancel' }
    ]

Answer 1

You can add your custom css class to the buttons. For example:

.center {
   text-align: center; 
   vertical-align: middle;
}

Then add this css class to your code like this:

buttons: [
      { text: 'Cancel', 
        role: 'cancel',
        cssClass: 'center'
       }
 ]

Answer 2

Try adding a custom class to your buttons.

For instance:

.customCenter {
     display: flex;    
     align-items: center;    
     justify-content: center; 
 }

{ text: 'Delete', role: 'destructive', class: 'customCenter' },