Formular mittig und zentriert darstellen

    Hey,


    ich frage mch wie es geht ein Container im Bildschirm mittig darzustellen und dann zu zentrieren. Habe schon nachgeschaut. Habe da was von display: table-cell; / vertical-align: middle; gelesen. Aber dies funktioniert nicht. Die Darstellung ist mit Flexbox.


    Anbei 2 Bilder (wie es momentan ist, und wie es aussehen soll (so in etwa)).


    Freue mich auf Antworten.


    Ist-Zustand : https://prnt.sc/fz65q8

    Soll-Zustand: https://prnt.sc/fz65zp


    Mein aktueller CSS-Code:


    Stef

    vertical-align: middle fällt mit dazu auch ein.

    Dies ist aber nicht geeignet, um block Elemente auszurichten. Genau das wird vermutlich dein Problem sein. ;)


    Villeicht setzt du das form in eine div-box, dann könntes klappen, wenn du diese ausrichtest. Dann ist es absolut zentriert und du kannst ggf weitere Eigenschaften hinzufügen ;)

    Hey,


    vielen Dank MrMurphy.


    Ich habe nun bischen mit dem code rumgetestet und habe gemerkt das erst durch folgende Angabe dies mittig positioniert wird:

    CSS
    height: calc(100vh - 0.5rem);

    Warum ist das denn so?


    Und das Problem mit dem Padding besteht ebenso noch. Sollte man wenn die %-Angaben nicht greifen px-Angaben nehmen ?

    Zitat

    Warum ist das denn so?

    Dieses CSS bezieht sich auf body und dessen Höhe ist nicht gleich der Fensterhöhe, sondern richtet sich nach dem Inhalt, in diesem Fall der Höhe deines Formulars. Damit body das Fenster ausfüllt, muss man die Höhe auf 100vh setzen (abzüglich padding in diesem Fall).


    Zitat


    Und das Problem mit dem Padding besteht ebenso noch. Sollte man wenn die %-Angaben nicht greifen px-Angaben nehmen ?

    Meinst Du damit, dass Du das Formular weiter nach unten verschieben möchtest? Dann funktioniert dieses in der Demo von MrMurphy einwandfrei:

    Code
    .formular {
    margin-top: 30%;
}

    Edit: Ich sehe, dass ich es falsch verstanden habe. Du möchtest dem Submit-Button ein padding geben. Auch das funktioniert bei mir einwandfrei:

    Code
    .formular button {
    align-self: center;
    padding: 5%;
}

    Der Button hat jedoch standardmäßig schon ein seitliches Padding, jedenfalls bei mir in Opera:

    Code
    input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
    padding: 1px 6px;
}

    Dadurch hat man den Eindruck, dass das seitliche Padding nicht wirkt, weil es sich nur wenig ändert.

    Hey,


    aso ok Danke.


    Mit dem Padding meinte ich, wenn ich jetzt alles mit flexbox positioniere, dass wenn ich dem submit button padding als % gebe dann der Padding nur nach links und rechts geht und nicht nach oben und unten. Nur bei px Angaben wird padding auf allen Seiten hinzugefügt.

    Hallo


    Bei Prozentangaben muss immer geschaut werden,


    a) worauf sich die Prozent beziehen


    und


    b) ob überhaupt Platz vorhanden ist.


    Im Gegensatz zu anderen Einheiten wie rem, em, px, vw, vh schaffen Prozentangaben keinen Raum, sondern können vorhandenen Raum nur ausnutzen. Bei nicht-vorhandenem Raum bewirken Prozentangaben deshalb nichts. Das ist grade für Anfänger schwer nachzuvollziehen, da die meisten Elemente transparent sind und ihre Größe deshalb nicht nichtbar ist.


    Erschwerend kommt dann noch hinzu, dass es bei den Browsern speziell bei height- und padding-Angaben in Prozent wohl immer noch zu unterschiedlichen Darstellungen kommt. Nach Möglichkeit oder bei Problemen sollten padding-/height-Angaben deshalb nicht in Prozent angegeben werden.


    Siehe auch


    http://www.thestyleworks.de/basics/percentage.shtml


    Ich habe mein Beispiel mal aktualisiert. Wenn padding, border und margin vom body Null betragen kann als Höhe natürlich auch direkt 100vh ohne eine calc-Berechnung eingetragen werden.


    Gruss


    MrMurphy

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden