reactjs - 如何在中心设置 reactstrap modal-header 的内容？

Question

我正在使用 reactstrap 模态，有 ModalHeader 我正在显示我的内容。但是当我试图将该内容放在标题中心时，我遇到了这个问题。

在检查元素后，我发现在 ModalHeader 中有<h5>标签，在这个标签内我的内容即将到来，我检查了<h5>标签没有使用 Modal-Header 的全宽。我认为因为它没有进入中心。如果有人知道 reactstrap Modal，请指导我如何将我的 Modal-Header 内容放在中心。在此先感谢。

这是我的示例代码。

<ModalHeader toggle={props.toggle} > 
<div className="d-flex justify-content-center mb-2">
 <img src={myImg} alt="img" className="imgSize" /> 
</div> 
<div className="d-flex justify-content-center"> 
<p>Hi <b>John -</b> here is my some text</p>
</div> 
</ModalHeader>

Answer 1

You can add className to h2 tag with cssModule props. Adding w-100 text-center solve the issue for me

<ModalHeader toggle={props.toggle}  cssModule={{'modal-title': 'w-100 text-center'}}> 
<div className="d-flex justify-content-center mb-2">
 <img src={myImg} alt="img" className="imgSize" /> 
</div> 
<div className="d-flex justify-content-center"> 
<p>Hi <b>John -</b> here is my some text</p>
</div> 
</ModalHeader>