我正在尝试将其按钮在网格第 2 列中单击的模态居中放置。任何人都可以指出正确的方向吗?当然,我不想对任何边距进行硬编码(响应式)。
现在它(绿色 div)仅显示/限制在网格列 2 中,如下所示。
display: grid;
grid-template-columns: 1fr 1fr;
height: 100%;
margin: 10px;
class Login extends Component {
state = {
isShowModal: false
};
openModal = () => {
this.setState({ isShowModal: true })
}
render() {
const { isShowModal } = this.state;
return (
<>
<div className="grid-1">
</div>
<div className="grid-2">
{isShowModal && <Modal />}
<div className="add">
<button onClick={() => this.openModal()} type="button">Open modal</button>
</div>
</div>
</>
)
}
}
最佳答案
您好,我想您正在寻找的是 Width max-content,带有一些 padding 和 margin 0px auto。
margin: 0px auto;
width: max-content;
padding: 10px;
max-width:100%; //for responsive purposes.
然后做一个环绕的div,固定位置。并将上述样式应用于周围 div 内的 div
它所做的是制作一个周围的 div,您可以在其中设计您的东西,它将居中。
旁注:如果您的 div 位于其他元素下方,只需将 z-index 设置为 1。
z-index:1;
关于javascript - css网格系统中的模态定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58372612/