I'm trying to vertically center the second span within my H1.
After attempting to change from display: inline-block to display: flex, I found that this causes my animation to start at the beginning of the container rather than in the center.
I suspect the issue may be related to the various display properties assigned to the parents of the span elements?
HTML
<section class="container">
<div id="description">
<h1>
<span>
This element is good,</span>
<span>
But this one is not centered.
</span>
</h1>
</div>
<div id="other-div">
</div>
</section>
CSS
.container {
margin: auto 30px;
background-color: black;
border-radius: 1rem;
display: flex;
}
#description {
flex: 1;
display: flex;
justify-content: center;
flex-direction: column;
color: white;
}
#description h1 span:first-child {
display: flex;
justify-content: center;
font-family: "Croissant One";
font-size: 3.2rem;
color: white;
}
#description h1 span:nth-child(2) {
font-family: "Croissant One";
font-size: 3.2rem;
display: inline-block;
vertical-align: middle;
overflow: hidden;
color: black;
background-color: rgb(255, 237, 36);
padding: 0px 15px;
border-right: 0.15em solid white;
white-space: nowrap;
animation: typing 2.5s steps(30),
blink-caret 0.9s step-end infinite;
}
@keyframes typing {
from {
width: 0
}
to {
width: 52%
}
}
@keyframes blink-caret {
50% {
border-color: transparent;
}
}
#other-div {
flex: 1;
display: flex;
justify-content: center;
}
Please assist with resolving this issue. Thank you!
Appreciate your help!