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:
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: