Flexbox Zentrierung wird nicht erkannt und ausgeführt.

  • Hey,


    ich bin grad dabei ein Liveticker zu erstellen. Die 2 Teams habe ich rechts und links und in der Mitte der Spielstand. So im ganzen funktioniert die Darstellung, bis auf eines die Zentrierung. Ich kann es nicht nachvollziehen warum genau das nicht funktioniert.


    Ebenso frag ich mich, wie man die Bilder unter dem Teamnamen darstellt. Habt ihr Vorschläge?


    Mein Code:

  • Zitat

    Ich kann es nicht nachvollziehen warum genau das nicht funktioniert

    Wenn ich das richtig verstehe, möchtest Du die Teams und den Spielstand zentriert in ihrem Container. Du hast jedoch für alle drei einen div-Container definiert und die Breite so festgelegt, dass die den übergeordneten Container ganz ausfüllen. Innerhalb der untergeordneten Container hast Du keine Ausrichtung definiert, so dass der Default "left" greift.

    Wenn Du einfach die Breitenangaben entfernst, sind die Elemente zentriert. Damit sie dann nicht so aneinander geklatscht aussehen, kannst Du ja mit paddings arbeiten. Oder justify-content:space-evenly für den übergeordneten Container verwenden.

    Sicher möchtest Du auch die Teamnamen und die Bilder zentriert. Auch das ist problemlos möglich, entweder mit text-align oder den Möglichkeiten vom Flexlayout.

    Zitat


    Ebenso frag ich mich, wie man die Bilder unter dem Teamnamen darstellt.

    Das kann ich nicht nachvollziehen, denn da Du für die Teamnamen h-Elemente verwendest, nehmen diese eine eigene Zeile ein und die Logos sind darunter. Für die Teamnamen mit den Logos würde es sich u. U. anbieten, figure-Elemente zu verwenden.


    Mir ist noch aufgefallen, dass die Logos stark verzerrt werden. Ich würde lieber height:auto verwenden.

  • Hallo


    Ich habe mal eine Lösung erstellt. Du kannst sie ja anschauen und mitteilen ob sie deinen Vorstellungen nahekommt.


    Ich habe den Ergebnisticker zweimal erstellt, da zwei grundsätzliche Probleme berücksichtigt werden müssen und die Anzeige bei unterschiedlichen Fensterbreiten direkt verglichen werden kann:


    a) Die Mannschaftsnamen können länger und kürzer als die Bildbreite der Logos sein. Die Bilder sollen jedoch immer zentriert untereinander stehen und die Mannschaften zentriert darüber.


    b) Die Ergebnisse können ein- und zweistellig sein. Trotzdem sollen die Doppelpunkte zentriert bleiben.


    Testdatei


    Gruss


    MrMurphy