After going through several articles on this topic, I've picked up some tricks for vertical alignment like using line-height for a single line of text, display:table for multiple divs, and Flexbox in CSS3. However, I'm still struggling to align two lines inside a div:
.keys {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
min-height: 70vh;
}
.key {
border: 0.1rem solid white;
margin: 1rem;
width: 5rem;
height: 5rem;
padding: 0.5rem 0;
text-align: center;
color: white;
}
kbd {
display: block;
}<div class="keys">
<div class="key" data-key="65"><kbd>A</kbd><span class="sound">text</span></div>
<div class="key" data-key="83"><kbd>S</kbd><span class="sound">text</span></div>
<div class="key" data-key="68"><kbd>D</kbd><span class="sound">text</span></div>
<div class="key" data-key="70"><kbd>F</kbd><span class="sound">text</span></div>
</div>Despite having a flexbox container already set up, resorting to display:table would require an extra div which I want to avoid. I’m considering adjusting the padding or experimenting with relative positioning as potential solutions. What would be the most effective way to vertically center this text content?