在 div 中居中 toastr 通知答案

【问题标题】：Center toastr notifications within a div在 div 中居中 toastr 通知
【发布时间】：2013-03-28 23:13:33
【问题描述】：

我正试图让我的toastr notification 出现在 div 的中间。我看过一些建议，例如 this one，但它是基于整个窗口居中的，而不是在 div 内。

当 toastr 对表单上的元素一无所知时，是否可以在表单元素中居中放置 toast 通知？

我最近的尝试是将 toast 大致放在页面的中心，但我想将它放在某个 div 的中心。那可能吗？如果有，怎么做？

这是我的居中尝试：

.toast-center {
    top: 50%;
    left: 40%;
}

【问题讨论】：

标签： asp.net css toastr

【解决方案1】：

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

然后您可以使用 toastr 的 positionClass 选项，这是您的通知弹出位置

toastr.options: {
    "positionClass": "your-newly-created-div-class"
}

【讨论】：

我不确定如何执行您刚才建议的所有操作。让我解决它，看看。谢谢。
感谢您的提示，但我不知道如何让它发挥作用。
@Bob Horn，查看this 文章，它解释了。
我认为这至少是答案的一半，另一半可能是containerId 选项？检查它在 toastr.js here 中的使用。如果你用containerId把参照系做成表格，然后positionClass把它放在中间，这样行吗？

【解决方案2】：

在 toastr.css 中添加：

.toast-top-center {
    top: 12px;
    left:50%;
    margin:0 0 0 -150px;
}

在 JavaScript 中，使用这个：

toastr.options = {
    positionClass: 'toast-top-center'
};

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

margin:0 0 0 (here caculate the -width/2 px for yourself)

【讨论】：

【解决方案3】：

你可以用jquery做到这一点

在 toastr.css 中添加：

.toast-top-center { 
   top: 12px;   
   margin: 0 auto;  
   left: 50%;   
   margin-left: -150px;
 }

在 js 文件后添加：

toastr.options = {
    positionClass: 'toast-top-center'
};

toastr.success("Your Message Header", "Your Message");

var $notifyContainer = $('#toast-container').closest('.toast-top-center');
if ($notifyContainer) {
   // align center
   var windowHeight = $(window).height() - 90;
   $notifyContainer.css("margin-top", windowHeight / 2);
}

【讨论】：

【解决方案4】：

以下 sn-p 在角度 ~9.1.0 中使用 "ngx-toastr": "^12.1.0" 进行测试。

组件名称.ts

import { ToastrService } from 'ngx-toastr';

@Component({
  selector: 'app-component-name',
  templateUrl: './component-name.component.html',
  styleUrls: ['./component-name.component.scss']
})
export class ComponentName implements OnInit {
 
    constructor(private readonly toastrService: ToastrService) { }
    
      ngOnInit(): void {
        this.toastrService.toastrConfig.positionClass = 'toast-top-center';
      }
}

组件名称.scss

.toast-top-center { 
    top: 12px;   
    margin: 0 auto;  
    left: 50%;   
    margin-left: -150px;
}

【讨论】：

【解决方案5】：

在 ngx-toastr (^14.1.4) 的最新版本中有一个原生解决方案，如果您检查 toast.css 文件，您可以看到以下内容：

.toast-center-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 }

因此，当您调用 toastr 通知时，您只需在 .ts 中使用 {positionClass: 'toast-center-center' }

【讨论】：