For the past few hours, I've been attempting to align 4 div elements as they appear on a keyboard layout, but I'm struggling to get it right...
I prefer not to use absolute positioning since I have 3 groups of four divs. These divs are meant to be positioned on the left side of the page next to a canvas, serving as instructions for my JavaScript game.
Here's the snippet of my code:
p.keyboard {
display: inline-block;
color: #5E5E5E;
font: bold 10px arial;
text-decoration: none;
text-align: center;
margin: 10px auto;
padding: 7.5px 10px;
background: #EFF0F2;
border-radius: 4px;
border-top: 1px solid #F5F5F5;
box-shadow: inset 0 0 25px #E8E8E8, 0 1px 0 #C3C3C3, 0 2px 0 #C9C9C9, 0 2px 3px #333;
text-shadow: 0px 1px 0px #F5F5F5;
}<div id="green">
<p class="keyboard">Z</p>
<p class="keyboard">Q</p>
<p class="keyboard">S</p>
<p class="keyboard">D</p>
</div>
<div id="blue">
<p class="keyboard">Flèche haut</p>
<p class="keyboard">Flèche gauche</p>
<p class="keyboard">Flèche bas</p>
<p class="keyboard">Flèche droite</p>
</div>
<div id="red">
<p class="keyboard">O</p>
<p class="keyboard">K</p>
<p class="keyboard">L</p>
<p class="keyboard">M</p>
</div>I've experimented with various layouts, like using flexbox and multiple nested div tags, but unfortunately, it seems that I just can't get it right. I simply want the "Z," the "O," and the "flèche haut" (up arrow) to be centered above the other three elements.
Any assistance would be greatly appreciated. Thank you!