Ich versuche, meine Etiketten-Tags so auszurichten, dass sie unter dem Text zentriert sind, aber es rührt sich nicht. Was soll ich ändern? Ich habe ehrlich gesagt keine Ahnung, warum das Textausrichtungszentrum nicht funktioniert. Ich habe überall gesucht, kann aber anscheinend nichts finden, was für mich persönlich funktioniert. Jede Hilfe ist willkommen, vielen Dank. - Sjoerd Code: {html}

<!DOCTYPE html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <title>Guardian - a safe online storage</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="manifest" href="site.webmanifest">
        <link rel="apple-touch-icon" href="icon.png">
        <!-- Place favicon.ico in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">

        <meta name="theme-color" content="#fafafa">
    </head>

    <body>
        <!--[if IE]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
        <![endif]-->

        <!-- Add your site or application content here -->
        <header>
            <div class="container flex">
                <div class="title">
                    <h1>Guardian</h1>
                    <p>A service to store your information</p>
                </div>
                <nav>
                    <a class="active" href="index.html"> Home </a>
                    <a href="forms.html"> All your information </a>
                </nav>
            </div>
        </header>
        <main>
            <section class="banner">
                <div class="container">
                    <div class="main-text">

                    </div>
                    <img src="img/guardian-logo.jpg" style="display: block; margin-left: auto; margin-right: auto;">
                    <h2> This is where you will store your information:</h2>
                    <div class="data">
                        <form action="forms_script/formsHandler.php" method="POST">
                            <label for="name">Email:</label>
                            <input type="text" id="fullName" placeholder="Enter full name" name="fullName">
                            <label for="email">Email:</label>
                            <input type="email" id="email" placeholder="Enter email" name="email">
                            <label for="pwd">Password:</label>
                            <input type="password" id="pswd" placeholder="Enter password" name="pswd">
                            <label>
                            </label>
                            <button type="submit">Opslaan</button>
                        </form>

                    </div> 
                </div>
            </section>
        </main>

        <footer>

        </footer>

    </body>

</html>



**CSS Part**

    body{
        font-family: Georgia, 'Times New Roman', Times, serif;
    }


    .title p {
        margin-top: 0;
    }

    .title h1 {
        margin-bottom: 0;
        line-height: 20px;
    }

    nav a {
        color: white;
        padding: 10px 15px;
        text-decoration: none;
    }

    nav .active {
        background-color: #76C38F;
        border-radius: 10px;

    }

    header {
        border-top: 3px solid #F2A102;
        border-right: 3px solid #F2A102;
        border-left: 3px solid #F2A102;
        background-color: #815B40; 
        color: white; 
    }

    /* ==========================================================================
                                    main
    ========================================================================== */

    .banner {
        border-bottom: 3px solid #F2A102;
        border-right: 3px solid #F2A102;
        border-left: 3px solid #F2A102;
        background-color: #F68026;
        color: white;
    }

    .banner h2 {
        text-align: center;
        margin: 0;
    }

    .data {
        display: flex;
        text-align: center;
        line-height: 150%;
        font-size: .85em;
    }

    .data input {
        display: block;
    }
    /* ==========================================================================
    Helper classes
    ========================================================================== */

    .container {
        width: 70%;
        margin: 0 auto;
    }

    .flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }



{php}

<h1>PHP test website</h1>

<?php

    $errorMessage = 'Please enter a valid email address';
    $name = $_POST['fullName'];
    $pswd = $_POST['pswd'];
    $email = $_POST['email'];

    echo "$pswd &nbsp;";
     // str_repeat('&nbsp;', 5); // adds 5 spaces   
    echo "$email &nbsp";

    echo "$name";

    if (filter_var($email, FILTER_VALIDATE_EMAIL) == false) 
    {
        echo "<script type='text/javascript'>alert('$errorMessage');</script>";
    }



     file_put_contents("../dpkfnkshjdbfjsdbfjsd/email_list.txt", "$email", FILE_APPEND); // put in data 

      file_put_contents("../dpkfnkshjdbfjsdbfjsd/password_list.txt", "$pswd", FILE_APPEND); // put in data 

?>

0
Sjoerd 7 Feb. 2020 im 17:54

3 Antworten

Beste Antwort

Ich gehe davon aus, dass Sie das Formular (Beschriftungen und Eingabe) zentrieren möchten. In diesem Fall können Sie Ihrem Formular einen Rand hinzufügen:

form {
  margin: auto;
}
0
Barskey 7 Feb. 2020 im 15:09

Dies liegt daran, dass label ein Inline-Element ist und daher nur so groß ist wie der darin enthaltene Text.

Die Möglichkeit besteht darin, Ihr label als Blockelement wie folgt anzuzeigen:

.data label {
    display:block;
    text-align:center;
}
0
Towsif 7 Feb. 2020 im 15:17

<label> ist standardmäßig kein Block und die Textausrichtung funktioniert nur, wenn das Tag das Verhalten von <div> aufweist.

Dies sollte gut sein, um zu beginnen:

label {
   display:block;
} 
0
Tommy89 7 Feb. 2020 im 15:03