无法获取php页面显示中心

时间:2018-05-21 08:12:39

标签: css html5 forms

我无法让我的表单显示中心,我已尝试过很多方法使用CSS,但无法弄清楚是什么阻止它以页面为中心。我与所有其他页面的风格相同,但由于某种原因,这个人拒绝表现;)。非常感谢任何帮助。

<html>

    <head>
        <title>Women Who Can - Subscription page</title>
        <meta charset="UTF-8">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
        <link rel="stylesheet" href="../_css/style.css">
        <!--Fonts-->
        <link rel="stylesheet" type="text/css" href="../steph/_css/ss-pika.css" />
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
        <link href="../_css/styles.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
        <div class="container">
            <h1>Subscribe For Free</h1>
            <div>
                <b class="text-white" style="float:right">Already a member? <a href="../login/index.html" class="text-white" style="text-decoration:underline;">Sign in</b></a>
                <br>
            </div>
            <div id="unique-section" class="row">
                <div class="section">
                    <form method="post" action="subscribe.php">
                        <div class="form-group">
                            <label>First Name:</label>
                            <input type="text" name="forename" class="form-control" placeholder="First Name" required autofocus/>
                        </div>
                        <div class="form-group">
                            <label>Last Name</label>
                            <input type="text" name="surname" class="form-control" placeholder="Last Name" required/>
                        </div>

                        <div class="form-group">
                            <label>Email:</label>
                            <input type="email" name="email" class="form-control" placeholder="womenwhocan.com" required/>
                        </div>
                        <div class="form-group">
                            <label>Username:</label>
                            <input type="text" name="username" class="form-control" placeholder="Username" required/>
                        </div>

                        <div class="form-group">
                            <label>Description:</label>
                            <textarea placeholder="Please tell us something interesting about yourself" style="height:200px; width:300px;font-size:12pt; align-vertical:" name="profile_description" class="form-control" required></textarea>
                        </div>

                        <div class="form-group">
                            <label>Password:</label>
                            <input type="password" name="password" class="form-control" placeholder="*******" required/>
                        </div>
                        <div class="form-group">
                            <label>Confirm Password:</label>
                            <input type="password" name="cpassword" class="form-control" placeholder="*******" required/>
                        </div>
                        <div class="form-group">
                            <input type="submit" name="subscribe" class="btn btn-primary" />
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="form-group">
            By signing up, you agree to our Terms of Use, Privacy Policy, and Anti-spam Policy
        <div>
        <!-- Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
        <script src="ajax.js"></script>
    </body>

</html>         

3 个答案:

答案 0 :(得分:0)

我猜你要显示&#34;容器&#34;在页面中间。您可以尝试添加此内容:

<div class="container" style"display: block; margin-left: auto; margin-right: auto;">

或者只是在容器类的css文件中添加以下内容:

display: block; 
margin-left: auto; 
margin-right: auto;

答案 1 :(得分:0)

将此添加到您的css

    <style>
    .container{
      width: 500px!important;
      margin:0 auto;
    }

    .row{
      display: block!important;
    }

    </style>

答案 2 :(得分:0)

试试这个

&#13;
&#13;
body h1{
  text-align: center;
}
.section{
  width:100%;
  margin: 0, auto;
  text-align: cnter;
}
div#unique-section {
    width: 60%;
    margin: auto;
}
&#13;
<html>

    <head>
        <title>Women Who Can - Subscription page</title>
        <meta charset="UTF-8">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
        <link rel="stylesheet" href="../_css/style.css">
        <!--Fonts-->
        <link rel="stylesheet" type="text/css" href="../steph/_css/ss-pika.css" />
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
        <link href="../_css/styles.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
        <div class="container">
            <h1>Subscribe For Free</h1>
            <div>
                <b class="text-white" style="float:right">Already a member? <a href="../login/index.html" class="text-white" style="text-decoration:underline;">Sign in</b></a>
                <br>
            </div>
            <div id="unique-section" class="row">
                <div class="section">
                    <form method="post" action="subscribe.php">
                        <div class="form-group">
                            <label>First Name:</label>
                            <input type="text" name="forename" class="form-control" placeholder="First Name" required autofocus/>
                        </div>
                        <div class="form-group">
                            <label>Last Name</label>
                            <input type="text" name="surname" class="form-control" placeholder="Last Name" required/>
                        </div>

                        <div class="form-group">
                            <label>Email:</label>
                            <input type="email" name="email" class="form-control" placeholder="womenwhocan.com" required/>
                        </div>
                        <div class="form-group">
                            <label>Username:</label>
                            <input type="text" name="username" class="form-control" placeholder="Username" required/>
                        </div>

                        <div class="form-group">
                            <label>Description:</label>
                            <textarea placeholder="Please tell us something interesting about yourself" style="height:200px; width:300px;font-size:12pt; align-vertical:" name="profile_description" class="form-control" required></textarea>
                        </div>

                        <div class="form-group">
                            <label>Password:</label>
                            <input type="password" name="password" class="form-control" placeholder="*******" required/>
                        </div>
                        <div class="form-group">
                            <label>Confirm Password:</label>
                            <input type="password" name="cpassword" class="form-control" placeholder="*******" required/>
                        </div>
                        <div class="form-group">
                            <input type="submit" name="subscribe" class="btn btn-primary" />
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="form-group">
            By signing up, you agree to our Terms of Use, Privacy Policy, and Anti-spam Policy
        <div>
        <!-- Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
        <script src="ajax.js"></script>
    </body>

</html>         
&#13;
&#13;
&#13;