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

Question

我正在使用 reactstrap Modal，有一个 ModalHeader，我在其中显示我的 content.But 我在尝试将该内容放在页眉中心时遇到了这个问题。

检查元素后我发现在 ModalHeader 里面有 <h5> 标签，在这个标签里面我的内容来了，我检查 <h5> 标签没有使用 Modal-[=20 的全宽度=] 认为因为它不在中心。如果有人知道 reactstrap Modal，请指导我如何将我的 Modal-Header 内容提前放入 center.Thanks。

这是我的示例代码。

<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

您可以使用 cssModule 属性将 className 添加到 h2 标签。添加 w-100 text-center 解决了我的问题

<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>

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

How can i set the content of reactstrap modal-header in center?

html

css

reactjs

react-modal

reactstrap