Создание метки по центру - PullRequest
Новая
       4

Создание метки по центру

0 голосов
/ 07 февраля 2020

Я пытаюсь выровнять теги ярлыка по центру под текстом, но он не сдвинется с места. Что я должен изменить? Я, честно говоря, понятия не имею, почему не работает центр выравнивания текста. Я искал везде, но не могу найти ничего, что работает для меня лично. Любая помощь приветствуется, спасибо в связи. - Код Sjoerd: {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 

?>

Ответы [ 3 ]

0 голосов
/ 07 февраля 2020

Я предполагаю, что вы хотите, чтобы форма (метки и ввод) была центрирована, и в этом случае вы можете добавить поле к вашей форме: 

form {
  margin: auto;
}
0 голосов
/ 07 февраля 2020

Это связано с тем, что label является встроенным элементом и, следовательно, имеет такой же большой размер, как и содержащийся в нем текст.

Возможно отобразить ваш label в виде блочного элемента, например: 

.data label {
    display:block;
    text-align:center;
}
0 голосов
/ 07 февраля 2020

<label> не является блоком по умолчанию, и выравнивание текста работает, только если тег имеет поведение <div>.

Это должно быть хорошо для начала: 

label {
   display:block;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...