在 div 中居中 toastr 通知

Bob*_*orn 5 css asp.net toastr

我试图让我的toastr 通知显示在 div 的中间。我已经看到了一些建议,比如这个,但它基于整个窗口居中,而不是在一个 div 内。

当 toastr 对表单上的元素一无所知时,是否可以将 Toast 通知置于表单元素中?

我最近的尝试是将 toast 大致居中放置在页面中,但我想将其居中放置在某个 div 中。那可能吗?如果是这样,如何?

这是我的居中尝试:

.toast-center {
    top: 50%;
    left: 40%;
}
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

Eli*_*Eli 5

您可以尝试创建一个新的 div 并将其放置在您预期的 div 的中心。

然后您可以使用positionClasstoastr 选项,这是您的通知弹出的位置

toastr.options: {
    "positionClass": "your-newly-created-div-class"
}
Run Code Online (Sandbox Code Playgroud)


小智 5

在 toastr.css 中,添加以下内容:

.toast-top-center {
    top: 12px;
    left:50%;
    margin:0 0 0 -150px;
}
Run Code Online (Sandbox Code Playgroud)

在 JavaScript 中,使用:

toastr.options = {
    positionClass: 'toast-top-center'
};
Run Code Online (Sandbox Code Playgroud)

如果你的toast div有其他宽度,你可以将上面的CSS修改为它的一半宽度。

margin:0 0 0 (here caculate the -width/2 px for yourself)
Run Code Online (Sandbox Code Playgroud)