Centralize div content in Alertcontroller

Question

I have the following code below

 let alert = this.alertCtrl.create({
  message: '<div><img height="50" src="assets/imgs/success.png"></div><div>' +
  '<p>Cadastrado com sucesso!!!</p>' +
  '</div>',
   buttons: [{
    text: 'OK',
    handler: data => {
      console.log('Ok clicked');
    }
  }]
});
alert.present();

Where I’m using importing the AlertController in this way:

import { AlertController } from 'ionic-angular';

See the image as it looks:

I would like to centralise the content of AlertController, but I tried in some ways but it doesn’t work, like for example in this way, but does not recognize.

Is there any way to centralize the content of div in the AlertController?

Answer 1

You need to define a css class for your Alertcontroller:

Example:

 let alert = this.alertCtrl.create({
      message: '<div><img height="80" src="http://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg"></div><div>' +
      '<p>Cadastrado com sucesso!!!</p>' +
      '</div>',
      buttons: ['Dismiss'],
      cssClass: 'custom-alert',
    });
    alert.present();
 }

Notice that in creating the alert I have an attribute cssClass where I pass a css class. css would look like this:

page-home {}

.custom-alert .alert-message{
    text-align: center;
    overflow: hidden;
}

OBS:. Note that the css are not inside the page stylization, that is, it has to be separated because the alert component is not rendered inside your page:

In this example I used a text-align: center to align the components, but nothing prevents you from customizing the css the way you prefer.

Upshot: