Is anyone else experiencing issues with the duration and current time text not staying centered vertically? It seems to be a hit or miss, sometimes centering correctly and other times not. What could be causing this inconsistency, especially when no code changes have been made?
Check out this screenshot showing the problem: Not Working
And here's another screenshot after a hard refresh, where everything is suddenly aligned properly without any code alterations: Working
<div class="player-controls">
<div>
<button id="playpause-button">
<i class="fas fa-play fa-lg"></i>
</button>
</div>
<div class="time-container">
<span id="currenttime">00:00</span>
</div>
...
</div>
Take a look at the CSS style sheet below for reference:
.player-controls {
background: #2f2f2f;
display: block;
padding: 0;
margin: 0 auto;
text-align: left;
width: 840px;
height: 52px;
user-select: none;
}
...
#duration,
#currenttime {
vertical-align: middle;
}