Ionic4 - 如何将警告按钮对齐到中心？

Question

我只需要快速修复，但是如何让我的按钮居中？我正在使用 "alertCtrl.create"。

同时，在 Ionic 的文档页面中，似乎没有某种居中的方式。

https://ionicframework.com/docs/api/alert-controller

 alertCtrl.create ({  
    header: 'Invalid Input',
    message: 'Please enter correct details',
    buttons: ['Okay']
}).then(alertElement => alertElement.present());
    return;
}

- Button Press

Answer 1

使用mode md来代替ios，因为默认情况下`mode='ios'`时按钮会居中显示。

alertCtrl.create ({  
    header: 'Invalid Input',
    mode:'ios', //by default you will get the button in center
    message: 'Please enter correct details',
    buttons: ['Okay']
}).then(alertElement => alertElement.present());
    return;
}

- Mohan Gopi

---

不适用于Android，仍在左侧。 - Paul G

Answer 2

您也可以使用CSS自定义类来居中按钮。当我尝试使用mode: 'ios'时，它改变了Android的原生外观，并显示出与iOS相似的样式。

创建警报时，请添加CSS类属性：

alertCtrl.create ({  
    cssClass: 'my-alert', // Custom css class
    header: 'Invalid Input',
    message: 'Please enter correct details',
    buttons: ['Okay']
}).then(alertElement => alertElement.present());
    return;
}

在您的global.scss中添加my-alert类。

.my-alert .alert-wrapper {      
    .alert-button-group {
      justify-content: center;
    }
  }

- Esdras Vitor