css - 居中对齐模态 ReactJS
问题描述
我正在尝试在 ReactJS 中设置模式的样式,并希望得到一些帮助。我在尝试将内容模式居中对齐时遇到了困难。另外,在样式化模态时,是否可以分配一个className并在css页面中对其进行样式化?我试过这样做,但它不起作用。所以我只是决定做内联样式,但我不能居中对齐我的模态。
<button onClick={()=> SEOsetModalIsOpen(true)} className="viewmore">
View More
<ArrowIcon className="arrowright"/>
</button>
<Modal
isOpen={SEOmodalIsOpen}
shouldCloseOnOverlayClick={true}
onRequestClose={()=>SEOsetModalIsOpen(false)}
style={{
overlay: {
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
opacity: 1,
},
content: {
position: 'absolute',
width: '500px',
height: '300px',
top: '200px',
left: '500px',
right: '500px',
bottom: '200px',
border: '1px solid #ccc',
background: 'blue',
overflow: 'auto',
WebkitOverflowScrolling: 'touch',
borderRadius: '4px',
outline: 'none',
padding: '20px'
}
}}
>
<h2>Search Engine Optimisation</h2>
<p>Hello World</p>
<button onClick={()=>SEOsetModalIsOpen(false)}>Close</button>
</Modal>
</div>
解决方案
而不是设置top
, left
, bottom
,right
以使您的内容居中,您可以设置
{
display: "flex",
justifyConent: "center",
alignItems: "center",
}
推荐阅读
- javascript - 如何清除超时以便我可以重新使用该功能?
- android - Kivy 应用程序无法在 Android 上运行
- reactjs - 在 React 中使用 Web3 和 Metamask
- html - 如何在 html 中将 Angular routerLink 显示为纯文本?
- javascript - 反应:未捕获(承诺)错误:请求失败,状态码为 400
- google-apps-script - 如何基于二级,甚至三级过滤器进行过滤?
- css - 反应在更新时更改 CSS 背景
- regex - 如何匹配行尾的空格作为前一句
- django - UUID 主键的格式错误的十六进制 UUID 错误字符串
- java - 如何处理 CDI 创建的 Runnable