Formular per CSS vertikal zentrieren

    Hallo, ich versuche grade dieses Formular vertikal in diesem div-Container zu zentrieren. Hoffe jemand kann mir etwas dabei helfen. Hänge euch gerne noch einen Screenshot mit an. Falls noch etwas an Informationen fehlen sollte, einfach bescheid sagen, da ich noch recht neu vertraut bin mit HTML und CSS. Das Endresultat sollte dann etwa so aussehen, dass Text (linke Seite) und Formular (rechte Seite) genau mittig (vertikal) zueinander stehen.

    Danke im Voraus! :)

    ln

    PS: mit "display: flex; align-items: center & justify-content: center funktioniert es leider wie im Beispiel zu sehen nicht.

    Ups, da haben sich jetzt unsere Postings überschnitten. Als erstes würde ich diese Inflation von div-Containern auf das notwendige reduzieren.

    Und dann ist der Grund, warum es nicht funktioniert, offenbar, dass Du das CSS, das Du gepostet hast, auf den Flex-Container und nicht auf das Formular, das offenbar ein Flex-Item oder ein Kind davon ist.

    Hey Sempervivum, lieben Dank für den beigefügten Artikel. Der war sehr hilfreich und aufschlussreich, nochmal zur gesamten Thematik. Habe jetzt versucht meinem div-Container mit der Klasse="formular" die Flexbox zuzuweisen (display: flex;) und anschließend den Items, also sprich den Formularfeldern "align-items" zugewiesen, jetzt hat er zwar was gemacht, weshalb ich dann noch den wrap hinzugefügt habe, jedoch wie in dem Bild ersichtlich, ist das Formular in der Gänze noch immer nicht wirklich mittig ausgerichtet, gegenüber meinem div-Container mit der Klasse="formular"?

    LG

    So sieht das HTML schon entschieden besser aus. Perfekt wäre es, wenn Du es nicht als Screenshot sondern als Text in Code-Tags, das </> in der Werkzeugleiste oben, posten würdest.

    Dann habe ich vorhin bemerkt, dass mir bei der Formulierunng in meinem Posting #4 ein Fehler unterlaufen ist. Der letzte Satz muss lauten:

    Zitat

    Und dann ist der Grund, warum es nicht funktioniert, offenbar, dass Du das CSS, das Du gepostet hast, auf den Flex-Container anwenden musst und nicht auf das Formular, das offenbar ein Flex-Item oder ein Kind davon ist.

    Das was jetzt fett geschrieben ist fehlte.

    Damit das Ganze funktioniert, müsste das HTML etwa so aussehen:

    Code
    <div class="align-vertical-center">
    <section>
        <h1>Say Hallo</h1>
        <!-- und der ganze Rest mit u. a. der Social-Buttons -->
    </section>
    <form>
        <!-- hier die Formularelementd -->
    </form>
</div>

    und das CSS so:

    Code
    div.align-vertical-center {
    display: flex;
    align.items: center;
}

    Hier habe ich natürlich nur das angegeben, worauf es ankommt.

    Das div.align-vertical-center ist der Flex-Container und section und form die Flex-Items.

    Das align-items: center; wirkt nur auf die direkten Kinder des Flex-Containers, die Flex-Items.

    Soooo.. habe es hinbekommen. Habe nun dem Formular noch eine Klasse zugewiesen ("form-container") und diesem Container dann einfach als Flexbox definiert, anschließend noch den wrap, damit er sich wieder verhält wie ein Block-Element, align-items und tadaaaa. :) Unten war außerdem noch ein margin drin, weshalb die Rechnung so oder so nicht aufgegangen wäre. Das habe ich also ebenfalls entfernt und jetzt sitzt alles einwandfrei!

    Lieben Dank für die Hilfe & alles Gute!!

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden