如何在Semantic-UI-React中将Modal居中？

Question

我是语义-UI-React框架的新手，最近遇到了一个我似乎无法修复的问题。我有一个登录和注册模态在我的主页上。当LogIn和注册按钮被触发时，模式弹出。但是，我不能让它出现在页面的中心。它在页面的顶部，部分被截断了。我该怎么做呢？提前感谢您的帮助！

Answer 1

包含模式对话框的外部<div>具有display: block;而不是flex，这会导致未对齐。更具体地说，由于某种原因，.dimmed.dimmable > .ui.visible.dimmer的display: flex定义被.visible.transition强加的display: block !important所覆盖。

您可能希望将以下内容添加到CSS中以解决此问题：

.dimmed.dimmable > .ui.modals.dimmer.visible {
  display: flex !important;
}

或者，如果您使用的是css模块：

:global(.dimmed.dimmable > .ui.modals.dimmer.visible) {
  display: flex !important;
}

Answer 2

几个月前，我在学习react时遇到了这个问题，这就是我如何在App.js文件夹下对这个issue.In我的.css文件进行排序的，只需添加：

.modal {
    height: auto;
    top: auto;
    left: auto;
    bottom: auto;
    right: auto;
}

希望它是helps.Cheers

Answer 3

SUI中的模式当前存在问题请查看此问题https://github.com/Semantic-Org/Semantic-UI/issues/6185