Problem beim positionieren (zentrieren) von DIV's

[MrMurphy1]

Hallo

Grundsätzlich solltest du die Anzahl von class und id kräftig zurückschrauben.

Die selben id dürfen auf einer Seite zudem nur einmal vorkommen.

Für die Spielkarten reicht eine class für das umgebende Element, eventuell dann noch welche für die Farbe der Spielkarten.

Für das Zentrieren ist Flexbox am Besten geeignet. Die Höhe sollte durch den Inhalt bestimmt werden.

Ich sehe zum Beispiel folgendes HTML

<section class="hand">
   <div>
      <p>8</p>
      <p>&spades;</p>
   </div>
   <div>
      <p>7</p>
      <p>&spades;</p>
   </div>
</section>

und dazu das folgende CSS

.hand {
   padding: 2rem 0;
   border: 1px solid red;
   display: flex;
   justify-content: center;
}
.hand div {
   border: 1px solid black;
   border-radius: 0.5rem;
   margin: 0 0.5rem;
}
.hand p {
   font-size: 4rem;
   padding: 0 3rem;
   margin: 0;
}
.hand p:nth-child(2) {
   font-size: 6rem;
}

Gruss

MrMurphy