Formular zentrieren

  • CSS

Es gibt 7 Antworten in diesem Thema. Der letzte Beitrag () ist von Lual.

    Formular zentrieren

    Hallo,

    wie kann man ein Formular zentrieren?

    Das Problem ist, dass ich in der Zeile,
    in dem das Formular hin soll, linksbündig
    ein kurzer Text steht.

    Kann mir jemand helfen?

    Freue mich auf Antworten.

    MFG

    Alex-Digital :D
    ~ Alex-Digital :D

    if(!Internet.VBP.Get<User>("Alex-Digital").IsOnline) this.Close(); :D

    HTML-Quellcode

    1. <p>
    2. <label for="Name">Name:</label>
    3. <input id="Name" type="text" name="Name" value="" size="20" maxlength="50" />
    4. </p>


    Das ist der CCS-Code dafür

    Quellcode

    1. label {
    2. clear: both;
    3. width: 10em;
    4. display: block;
    5. float: left;
    6. cursor: pointer;
    7. }


    Es sieht dann so wie PNG unten aus
    Bilder

    • aussehen.png

      2,28 kB, 339×173, 123 mal angesehen
    Gruß K4RTOFF3L

    Das Problem zu erkennen ist wichtiger, als die Lösung zu erkennen, denn die genaue Darstellung des Problems führt zur Lösung. - Albert Einstein

    Hallo,

    hier mein Code:

    HTML-Quellcode

    1. <html>
    2. <head>
    3. <link rel="stylesheet" href="style.css" />
    4. <meta content="de" http-equiv="Content-Language" />
    5. <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    6. <title>TestTest</title>
    7. </head>
    9. <body>
    10. <div class= "content-top">
    11. TestTest</div>
    12. <form>
    14. </form>
    15. </body>
    17. </html>


    CSS-Quellcode

    1. .content-top
    2. {
    3. font-size:xx-large;
    4. font-family:"Segoe UI Light","Segoe UI";
    5. width:100%;
    6. }
    8. form
    9. {
    10. margin-top: 0px;
    11. padding-top:7px;
    12. margin-bottom: 0px;
    13. text-align: center;
    14. }


    Aber so komm ich immer noch zum gleichen Ergebnis.

    MFG

    Alex-Digital :D
    ~ Alex-Digital :D

    if(!Internet.VBP.Get<User>("Alex-Digital").IsOnline) this.Close(); :D

    So müsste es nach meinem Beispiel aussehen!

    HTML-Quellcode

    1. <html>
    2. <head>
    3. <link rel="stylesheet" href="style.css" />
    4. <meta content="de" http-equiv="Content-Language" />
    5. <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    6. <title>TestTest</title>
    7. </head>
    9. <body>
    10. <div class= "content-top">TestTest</div>
    11. <form>
    12. <p>
    13. <label for="Name">Name:</label>
    14. <input id="Name" type="text" name="Name" value="" size="20" maxlength="50" />
    15. </p>
    17. <p>
    18. <label for="Name">Email:</label>
    19. <input id="Name" type="text" name="Name" value="" size="20" maxlength="50" />
    20. </p>
    22. </form>
    23. </body>
    25. </html>


    CSS-Quellcode

    1. .content-top
    2. {
    3. font-size:xx-large;
    4. font-family:"Segoe UI Light","Segoe UI";
    5. width:100%;
    6. }
    8. label {
    9. clear: both;
    10. width: 10em;
    11. display: block;
    12. float: left;
    13. cursor: pointer;
    14. }
    Gruß K4RTOFF3L

    Das Problem zu erkennen ist wichtiger, als die Lösung zu erkennen, denn die genaue Darstellung des Problems führt zur Lösung. - Albert Einstein

    Hallo,

    so schaut es dann aus:

    Genauso.

    MFG

    Alex-Digital :D
    Bilder

    • GehtNicht.PNG

      2,52 kB, 389×190, 152 mal angesehen
    ~ Alex-Digital :D

    if(!Internet.VBP.Get<User>("Alex-Digital").IsOnline) this.Close(); :D

Facebook
Telefonspende