React引导程序中的模式标题和按钮居中

Question

我正在尝试为我的项目实现React Modal。我想将模式标题和模式按钮居中。我试着使用flex和内容中心，但没有成功。任何建议都是有价值的。

<Modal show={modalShow} onHide={this.handleClose} aria-labelledby="contained-modal-title-vcenter" centered>
<Modal.Header closeButton>
<div className="d-flex justify-content-center">
<Modal.Title>{isVerified?"Submitted succesfully":"Failed to submit"}</Modal.Title>
</div> 
</Modal.Header>
<Modal.Footer>
<Button variant={`${isVerified == false?"danger ":"success"}`} onClick={this.handleClose} centered>
{isVerified?"Ok":"Try again"}
</Button>
</Modal.Footer>
</Modal>

Answer 1

我尝试了不同的类，但有效的是：

import React from "react";
import { Modal, Button } from "react-bootstrap";
const ModalPage = ({ modalShow, handleClose, isVerified }) => {
return (
<Modal
show={modalShow}
onHide={handleClose}
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header
closeButton
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<Modal.Title>
{isVerified ? "Submitted succesfully" : "Failed to submit"}
</Modal.Title>
</Modal.Header>          
<Modal.Footer
style={{
display: "flex",
justifyContent: "center",
}}
>
<Button
variant={`${isVerified == false ? "danger " : "success"}`}
onClick={handleClose}
centered
>
{isVerified ? "Ok" : "Try again"}
</Button>
</Modal.Footer>
</Modal>
);
};
export default ModalPage;

Answer 2

用于居中标题和关闭按钮：

如果增加水平填充并在标题上使用ms-auto，则可以将关闭按钮移动到适当的位置，同时保持标题文本居中。

<Modal>
<Modal.Header className="px-4" closeButton>
<Modal.Title className="ms-auto">Title</Modal.Title>
</Modal.Header>
<Modal.Body>Body</Modal.Body>
</Modal>