I've been attempting to center my text with a typing effect in the middle of this div, but I'm having trouble getting it to work. Below is the code I tried using, but it's not achieving the desired result. The text continues to display on the left side of the div.
<header class="masthead text-white text-center">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-xl-10 css-typing mx-auto ">
<p>
Hey! Ik ben
</p>
<p>
Tom Faas
</p>
</div>
</div>
</div>
</header>
The CSS code:
.css-typing p {
border-right: .15em solid white;
font-family: "Courier";
font-size: 14px;
white-space: nowrap;
overflow: hidden;
}
.css-typing p:nth-child(1) {
width: 7.3em;
text-align: center;
-webkit-animation: type 2s steps(40, end);
animation: type 2s steps(40, end),
blinkTextCursor 500ms steps(44) infinite normal;;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.css-typing p:nth-child(2) {
width: 7.3em;
font-size: 200%;
text-align: center;
opacity: 0;
-webkit-animation: type2 2s steps(40, end);
animation: type2 2s steps(40, end),
blinkTextCursor 500ms steps(44) infinite normal;;
-webkit-animation-delay: 2s;
animation-delay: 2s;
animation-fill-mode: forwards;
}
@keyframes type {
0% {
width: 0;
}
99.9% {
border-right: .15em solid white;
}
100% {
opacity: 1;
border: none;
}
}
@-webkit-keyframes type {
0% {
width: 0;
}
99.9% {
border-right: .15em solid white;
}
100% {
opacity: 1;
border: none;
}
}
@keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: .15em solid white;
}
100% {
opacity: 1;
border: none;
}
}
@-webkit-keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: .15em solid white;
}
100% {
opacity: 1;
border: none;
}
}
In the given example, I attempted to use the mx-auto class to center the text, but it still remains aligned to the left of the div.