Ein Element vertikal in Flexbox zentrieren

  • Ich bräuchte mal Hilfe von professionellen Designern, da ich es nicht hinbekomme ^^

    Ich will ein Element in einem Flex-Container gerne vertikal zentrieren (siehe Anhang, Element mit rotem Rahmen). Das Element soll nach oben und unten denselben Abstand haben (siehe rote Pfeile)

    Das Element darüber (Logo) soll mit einem margin-bottom: 70px; über dem zentrierten Element liegen. Derzeit sind beide Elemente zentriert, was nicht der Fall sein soll.

    Eine Live-Demo zum Testen gibt es hier: https://www.seo-vergleich.de/preview/ (kein "echtes" WSC, da diese Version sonst noch nicht Live ist).

    Bin über jede Hilfe dankbar!

    • Offizieller Beitrag

    Das lässt sich direkt gar nicht realisieren, denn eine Zentrierung basiert immer auf allen Elementen. Für spezifisch diese Seite kannst du dir damit behelfen, dass du den Logo-Teil mit einer Kombination aus ::before und ::after erzeugst und absolut über dem Container des Eingabefeldes positionierst.

  • Hast du schon versucht um das Logo und dem Container darunter einen weiteren Container zu setzen und den auch auf display:flex; setzt?

    Dann könntest du mit

    flex-direction:column; Und justify-content:space-between; die 2 Elemente oben und unten im Container anzeigen lassen, dann sollte auch dein margin-bottom funktionieren (wenn ich mich jetzt nicht irre)

  • Und wenn du den Container im dem die 2 Dinge drin sind nen margin-top: -(deinem margin bottom vom Logo + logo container) px; gibst?

    Wenn ich dich richtig verstehe möchtest du den grünen Container exakt in der Mitte haben richtig? Dann sollte das oben eigentlich funktionieren

    Oder dem Hauptcontainer nen padding-bottom verpassen (bin mir da jetzt etwas unsicher ob das so funktioniert oder ob ich ein Denkfehler habe 😂 )

  • Ein negatives margin hatte ich bereits probiert, das führt dann aber bei unterschiedlichen Bildschirmgrößen (nicht nur Breite, sondern besonders auch Höhe) zu unvorhersehbaren Ergebnissen. Da müsste man vermutlich viele extra Regeln für kleinere Auflösungen einbauen, und zwar nicht nur bei der Breite, sondern eben auch bei unterschiedlichen Höhen.

    • Offizieller Beitrag

    Wenn du die exakte Höhe des ersten Elementes kennst, kannst du beiden Container mit transform: translateY(-123px) ein Stück nach oben setzen. Um es zu zentrieren, müssen beide Container um jeweils (höheDesErstenElements + marginTop) / 2 Pixel verschoben werden.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!