Center Ngx-toastr toast-message if no toast-header is present

51 views Asked by At

I have created a set height for all ngx-toasters, but doing this also moves the text to the top.

.toast-container {
  margin-top: 50px;
  pointer-events: none;
  position: fixed;
  z-index: 999999;
  opacity: 0.9;
}
.toast-container * {
  box-sizing: border-box;
}
.toast-container .ngx-toastr {
  position: relative;
  overflow: hidden;
  margin: 0 0 6px;
  padding: 15px 15px 15px 50px;
  width: 400px;
  height: 100px;
  border-radius: 3px 3px 3px 3px;
  background-position: 15px center;
  background-repeat: no-repeat;
  background-size: 24px;
  box-shadow: 0 0 12px #999999;
  color: #FFFFFF;
}

How do I make it so the text is also centered next to the icon when there is no header present?

See example:

enter image description here

I tried to center the text in the container using

  display: flex;
  align-items: center;
  justify-content: center;

But then the close button gets centered as well, and it doesn't outline to the left as expected:

enter image description here

0

There are 0 answers