制作标签标签中心答案

【问题标题】：Making label tag center制作标签标签中心
【发布时间】：2020-05-23 17:33:12
【问题描述】：

我正在尝试将我的标签标签对齐到文本下方的中心，但它不会让步。我应该改变什么？老实说，我不知道为什么 text-align center 不起作用。我到处搜索，但似乎找不到任何适合我个人的东西。欢迎任何帮助，谢谢。 - 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 

?>

【问题讨论】：

标签： php html css forms label

【解决方案1】：

<label> 默认不是块，文本对齐仅在标签具有<div> 的行为时才有效。

这应该是好的开始：

label {
   display:block;
}

【讨论】：

【解决方案2】：

我假设您希望表单（标签和输入）居中，在这种情况下您可以为表单添加边距：

form {
  margin: auto;
}

【讨论】：

做到了！谢谢你:)

【解决方案3】：

这是因为label 是一个内联元素，因此只与它包含的文本一样大。

可以将您的label 显示为这样的块元素：

.data label {
    display:block;
    text-align:center;
}

【讨论】：

【解决方案4】：

我有同样的问题，这解决了我的问题。

label {
  margin: auto;
}

【讨论】：

【解决方案5】：

您应该在您的文件中添加一个简单的代码，如下所示：

<style>
label {
  display: block;
  text-align: center;
}
</style>

【讨论】：

虽然此代码可以解决问题，including an explanation 说明如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请编辑您的答案以添加解释并说明适用的限制和假设。