Center div content in AlertController

Navigation
1

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 am I using importing AlertController like this: 

import { AlertController } from 'ionic-angular';

View the image as it stands:

IwouldliketocenterthecontentofAlertController,butIhavetrieditinsomewaysbutitdoesnotwork,suchas this way , but does not recognize it.

Is there any way to centralize content from div to AlertController ?

    
asked by anonymous 05.12.2017 / 17:15

1 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>Cadastradocomsucesso!!!</p>'+'</div>',buttons:['Dismiss'],cssClass:'custom-alert',});alert.present();}

NoticethatincreatingthealertIhaveacssClassattributeinwhichIpassacssclass.Csswouldlooklikethis:

page-home{}.custom-alert.alert-message{text-align:center;overflow:hidden;}
Notethatcssisnotwithinpagestyling,ieithastobeseparatedbecausethealertcomponentisnotrenderedinsideyourpage:

InthisexampleIusedatext-align:centertoalignthecomponents,butnothingpreventsyoufromcustomizingthecssthewayyouprefer.

Result:

    
05.12.2017 / 21:12
Session in Laravel 5 Validation of login information does not work