Container auf Seite zentrieren

  • Hallo Leute,


    ich wollte eine unbestimmte Anzahl an div-container auf einer Seite zentriert darstellen.

    Ein float: left; soll die Container so lange nebeneinander anordnen bis die reihe voll ist. Der Abstand zum linken und rechten Rand muss nicht groß sein (5px), sodass viel Container auf einer Reihe passen und bei kleineren Bildschirmen dementsprechend kürzer werden.

    Es gibt zwar viele Beiträge und Seite wo div center usw. beschrieben wird aber das hat mir nicht geholfen.


    Ich hab hier mal den Code und einen Link und hoffe jemand kann mir dabei helfen.



  • Teste mal...

    Code
    1. .block-center {
    2. display: flex;
    3. justify-content: center;
    4. flex-wrap: wrap;
    5. }

    Und das float: left; bei den anderen Containern löschen!

  • Hallo Sailor, vielen Dank für deine Hilfe.


    Dein Code funktioniert.

    Gibt es noch eine Möglichkeit, dass die Container, wenn sie auf die nächste Zeile gehen, sich links anordnen statt mittig?

  • Jein... also vielleicht nicht so, wie du es haben möchtest.

    Wie viele Container in eine Reihe passen, ist ja abhängig davon, wie breit der Bildschirm ist und das ist ja angefangen bei einem Smartphone bis hin zu einem großen HD - Monitor eine ganz schöne Spanne.

    Wenn du weißt, wie viele Container maximal auf der Seite angezeigt werden, dann kannst du ausrechnen, wie viel Platz (in Pixel) die benötigen.

    Dann könntest du für Bildschirme, die kleiner sind als diese Breite, eine MediaQuery ins CSS schreiben, die dann von justify-content: center; auf justify-content: left; umschaltet.

    Etwa so...

    Code
    1. @media screen and (max-width: 1295px) {
    2. .block-center {
    3. justify-content: left;
    4. }
    5. }

    Den Wert '1295px' musst du natürlich an deine Seite und die maximale Zahl von Containern anpassen anpassen - und das Ganze auch noch testen, ob es überhaupt das liefert, was du haben willst.

  • Ah ok. Dann lass ich es so. Es soll nicht auf Bildschirmgrößen beschränkt sein. So ist es auch OK.


    Vielen Dank nochmal.

  • Hast du den Code getestet? Er ist nicht auf Bildschirmgrößen beschränkt... er passt für alle Bildschirmgrößen!

    Er kann aber nur mit einer bestimmten Anzahl von Containern umgehen... wenn die Anzahl der Container sich ändert, dann muss der 'max-width' Wert angepasst werden.

  • Sailor du bist ja in Flexbox einer der Leute die das an besten mit können ( finde ich ).

    Meine Frage ist jetzt ob dein justify-content: left; nicht eigentlich das gleiche wie justify-content: flex-start; ist.


    Habe mit beiden möglichkeiten mal rumgespielt mit verschieden vielen Boxen und größen, doch ich konnte da jetzt kein unterschied feststellen.

    Oder gibt es da doch unterschiede ?

  • Hallo basti1012 ... neee... du hast absolut Recht! Es müsste richtig 'flex-start' sein, habe ich irgendwie durcheinander gebracht. Hmmm... aber 'left' scheint scheint aber auch zu klappen ;)... oder es ist ganz einfach, weil 'flex-start' der Default-Wert ist und deswegen der Browser das (falsche) 'left' ignoriert.

  • Sailor , ja ich hab den Code getestet. Aber es wird dann alles nach links geschoben wenn das Fenster kleiner als max-width: 1295px ist.


    Im Prinzip sollen alle Container nicht versetzt stehen und wenn die erste Zeile voll ist soll er aber in nächsten Zeile unter den ersten Container positioniert werden. Aber im gesamten noch zentriert bleiben. Also so wie eine float: left; welches mittig auf der Seite positioniert ist und mit der Anzahl der Container immer breiter wird bis die nächste Zeile angefangen wird.


    Ich weiß das ist sehr speziell. Aber so wie es jetzt ist reicht das auch.

  • Zitat

    Ich weiß das ist sehr speziell.

    Nein.


    Dein Beispiel-Quelltext hat mit der Praxis und korrektem HTML nichts zu tun. Deshalb können wir dir auch keine praxisgerechten Lösungen zeigen. In der "richtigen" Seite werden die Container entweder unterschiedliche Texte, Bilder oder Bilder mit Texten enthalten. Dafür gibt es dann bessere Lösungen.

  • Hallo MrMurphy


    Was meinst Du damit "In der "richtigen" Seite"? Das ist die richte Seite. Nur Texte und Links werden angepasst und ist dann ein Menü. Da werden dann nur einzelne Worte drin stehen evtl. 2 Wörter.


    Und was meinst du mit "hat mit der Praxis und korrektem HTML nichts zu tun"? Spontan sehen ich nur, dass ich den Code nicht einrücke. Aber das wirst Du wahrscheinlich nicht gemeint haben.

  • Den Link habe ich im Anfangsbeitrag zwar schon rein gestellt aber hier ist nochmal der Link.


    Das soll so aussehen wie Du es dort siehst. Es ist halt nur eine Menü. Evlt. noch kleinere Anpassungen bei den Farben. Es kommen evlt. noch Container hinzu oder werden entfernt. Je nach Menüinhalt bzw. Untermenüs. Die Links sind nicht gesetzt weil es im Backend verwendet werden soll.