vergrößern und zentrieren

    so sieht meine Website aus: http://prntscr.com/nbv5bg

    HTML
    1. <body>
    2. <form id="loginform" action="index.php" method="post">
    3. <ul id="lfitems">
    4. <input type="text" name="name" placeholder="Name">
    5. <input type="text" name="password" placeholder="Password">
    6. <button type="submit" name="button">Login</button>
    7. </ul>
    8. </form>
    9. </body>
    CSS
    1. #loginform {
    2. position: fixed;
    3. }
    5. #lfitems {
    6. display: flex;
    7. flex-direction: column;
    8. }

    Ich probiere seit Stunden rum und ich will die zwei Felder und den Knopf in der Mitte haben, was genau soll ich jetzt machen:?:
    und ich will alles vergrößern

    Du hast ja schon mit flex box angefangen

    Da gibt es auch befehle das mittig anzuordnen.

    Hier kannst du mal testen wie welche befehle reagieren und dann bekommst du auch den Code raus

    http://the-echoplex.net/flexyboxes/


    Was meinst du mit vergrößern ? Das die Felder und Schrift immer größer sind oder nur beim klick oder hovern oder sonst was ?


    Normal größer machen geht mit Css

    Zb so

    Code
    1. <style>
    2. input{
    3. height:50px;
    4. width:300px;
    5. font-size:40px;
    6. }
    7. </style>

    Das es nur größer beim klicken oder hovern wird ist was anderes. Das geht dann mit :hover oder auch Js

    Danke, das mit height, width und font-size war ganz hilfreich,
    mein body hat jetzt display: flex; und justify-content: center;
    justify-content: center; ändert aber nur die x-Koordinate,
    ich hab' einfach margin-top: 12.5% gemacht und das ist jetzt
    ungefähr in der Mitte, geht das auch anders?

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von KartoffelPantoffel ()

    Es gibt aber auch

    align-items:center:


    Dann könnte man das auch wie du es machst mit prozente und margin , aber das geht ja auch nur wenn du die höhe des container kennst.( ansonsten wäre JS von nöten).

    Zb Container= 400px;

    Dann

    margin-top:calc(50% - 200px);


    oder etwas komplizierter


    margin-top:calc((100% / 2) - (200px / 2));


    text-align:center gibt es auch noch ,ist aber nicht immer erfolgreich nur bei bestimmten sachen die ich sowieso nicht erklärt bekomme.

    Am besten machst du es mit Flexbox weil dann hast du in späteren verlauf ,wenn du die Seite zu ende baust auch kaum probleme mit Responsiven Seitenlayout und so weiter.


    margin:auto auto; geht auch ab und zu ,doch da weiß ich jetzt nicht genau wann das genau funktioniert.Das hatte glaube ich was mit den Eltern Element zu tun.


    margin:0 auto; = macht das Element mittig auf der Horizontale

    margin:auto 0; = auf der vertikalen.

    margin:auto auto; = macht es komplett mittig.


    Doch gehe da erst Googeln wenn du eine Richtige erklärung brauchst wann und wieso das genau geht,weil meine erklärung versteht sowieso kaum einer. Nicht mal ich selbst ^^

    Danke, align-items:center; hat mir gefehlt, vor justify-content: center; hab' ich align-items:center; gemacht, aber auf die Idee beides zu machen bin ich leider nicht gekommen, margin hab' ich gerade auch probiert und das ist irgendwie seltsam