Cannot center alert buttons

Ionic Framework ionic-v3
1

Hello I am trying to center the buttons on my confirmation alert. I can center the title and message as well as change the color of the alert buttons, but I can’t center buttons. They appear shifted to the right.

Here is my alert definition:

let alert = this.alert.create({
        title: 'Reset',
        message: 'Reset to Default Settings?',
        cssClass: 'reset',
        buttons: [
          {
            text: 'Cancel',
            role: 'cancel',
            handler: () => {
              console.log('Cancel clicked');
            }
          },
          {
            text: 'Confirm',
            handler: () => {
              console.log('Reset clicked');
             }
          }
        ]
      });

      alert.present()

Here is my css:

.reset {
    .alert-wrapper {
        background-color: #c80000 !important;
    }

    .alert-title {
        color: white !important;
        text-align: center !important;
    }

    .alert-message {
        color: white !important;
        text-align: center !important;
    }

    .alert-sub-title {
        color: white !important;
        text-align: center !important;
    }

    button {
        color: white !important;
        text-align: center !important;
    }

}

Any insight would be greatly appreciated

2

Try it changing text-align: center !important to width: 100% !important and let me know!
You want one above the other, no?

3

Thanks for the reply. I actually want them in the same row side by side with the buttons centered on the screen.

What is interesting is when I use

width: 100% !important

The buttons are stacked as expected (not what I want), but the text for the buttons is shifted all the to the right not centered.

4

The problem is on android, no?

5

Actually yes on Android

6 
.changeAvatar .alert-wrapper {
     
  .alert-title {
    text-align: center;
  }
  .alert-sub-title {
    text-align: center;
  }

  .alert-message {
    text-align: center;
  }

  .alert-button-inner {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

}

alert-button-center

2 Likes
7

thank you, this works

8

Thanks great, work!!!