Asp.net 在div中集中toastr通知 我试图让我出现在一个div的中间。我看到了一些建议，比如，但是它是基于整体窗口，而不是在div。

当toastr对表单上的元素一无所知时，是否可以将toast通知集中在表单元素中

我最近的尝试是在页面中大致居中放置烤面包片，但我想将其居中放置在某个分区内。这可能吗？如果是，怎么做

这是我的定心尝试：

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

---

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

然后，您可以使用toasrt的

positionClass

选项，该选项是弹出通知的位置

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

---

在toastr.css中，添加以下内容：

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

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

在JavaScript中，使用以下命令：

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

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

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

---

您可以使用jquery来完成

---

在toastr.css中，添加以下内容：

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

.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);
}

---

以下代码段在angular~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';
      }
}

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

组件名称.scss

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';
      }
}

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

---

我不知道怎么做你刚才建议的每件事。让我来看看。谢谢你。谢谢你的提示，但我不知道该怎么做。@Bob Horn，检查文章，它解释道。我想这至少是答案的一半，另一半可能是

集装箱ID

选项？检查它在toastr.js中的用法。如果你使用<代码>容器ID <代码>来制作参考帧的形式，那么<代码>位置类< /代码>把它放在中间，这样行吗？