Problem beim positionieren (zentrieren) von DIV's

[Peter Lustig]

Hallo,

erst einmal meinen bisherigen code: https://jsfiddle.net/h6m332ys/

Mein Problem nun ist das ich die DIV's mit der Klasse "card" zentrieren möchte innerhalb der anderen Klasse "hand" nur leider schaffe ich das nicht. Ich habe bereits viel geooglet und komme einfach nicht darauf was ich falsch mache. Ich habe probiert "margin: 0 auto" zu der Klasse "hand" hinzuzufügen aber die Karten wurdern immernoch nicht zentriert.

[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

[Peter Lustig]

Vielen Dank!

Das hilft mir ordentlich weiter, besonders "display: flex" kannte ich noch nicht.

[Rolf b]

Gemäß caniuse.com kennen das 8 Prozent der deutschen Web-User das auch nicht bzw. nur stotternd (die IE-11 Nutzer). So gerne man den IE auch totredet - ein paar Fliegen sitzen noch auf dem Misthaufen. Du musst also entweder diese Fliegen summen lassen, die bekannten IE-Bugs umschiffen oder ein Fallback in petto haben.

Gruß Rolf

[marctrix]

Hej Rolf,

Gemäß caniuse.com kennen das 8 Prozent der deutschen Web-User das auch nicht bzw. nur stotternd (die IE-11 Nutzer). So gerne man den IE auch totredet - ein paar Fliegen sitzen noch auf dem Misthaufen. Du musst also entweder diese Fliegen summen lassen, die bekannten IE-Bugs umschiffen oder ein Fallback in petto haben.

Ich glaube mit der Darstellung im IE11 kann man gut leben, in älteren Browsern steht dann alles untereinander, sollte aber funktionieren...

Marc

PS: Es gibt auch noch die proprietären Schreibweisen (Präfixe und Konsorten), wenn es denn sein muss...