CSS: Zentrieren?

schemil053 · 01.02.2022

Hallo,
ich versuche derzeit für einen Minecraft-Server eine Preisliste zu machen.

Ich habe das Problem, dass alles irgendwie in einer Reihe ist.
Kann mir da jemand helfen?

Mein Code:
https://www.toptal.com/developers/hastebin/osacefaqam.xml

LG

Sempervivum · 01.02.2022

Ich habe das Problem, dass alles irgendwie in einer Reihe ist.

Dafür ist dieses CSS verantwortlich:

Code:

body {
  min-height: 100vh;
background: #212534;
 display: flex;
/* align-items: center; */
align-items: auto;
/* flex-direction: column; */
flex-direction: row;

Es ordnet die Elemente nebeneinander an.
Zwei Lösungsmöglichkeiten:
Zeilenumbruch zulassen durch flex-wrap: wrap;
oder mit Gridlayout:

Code:

        body {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        }

schemil053 · 02.02.2022

Das hat leider nicht funktioniert

schemil053 · 02.02.2022

Ohne die Parameter

Sempervivum · 02.02.2022

Was hast Du denn jetzt genau versucht? Ich hatte dir zwei Lösungsmöglichkeiten angeboten.

schemil053 · 03.02.2022

Sempervivum schrieb:
Was hast Du denn jetzt genau versucht? Ich hatte dir zwei Lösungsmöglichkeiten angeboten.

beides. Hab sogar den zentrierenden Code gelöscht, das hat leider wie im Bild oben ausgesehen. Habe jetzt ein anderes Design genutzt, welches den Inhabern besser gefällt. Dieses "neue" Design hat funktioniert. Ich habe bootstrap eingebunden und <div class=row> genutzt um das Problem zu lösen. Viele Dank