Question

我试图建立我的第一个网站，偶然发现了一个问题。我无法将我的注册表格对齐在中心。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content ="width = device-width, initial-scale = 1">       
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
    <style type="text/css">
        body{font: 14px sans-serif;background-color: slategrey;}
        .wrapper{width: 350px; padding: 20px;}
        h2 {color:#ff0000}
    </style>
</head>
<body>

我无法让下一部分排在页面中间。它只是被推到了一边。

<div align=center>
    <h2>Login</h2>
    <p>Please fill in your credentials to login.</p>
        <form class="form-horizontal" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
            <div align=center>
                <div class="form-group <?php echo (!empty($username_err)) ? 'has-error' : ''; ?>">
                    <div class="col-xs-2">
                        <label>Username</label>
                        <input type="text" name="username"class="form-control" value="<?php echo $username; ?>">
                        <span class="help-block"><?php echo $username_err; ?></span>
                    </div>
                </div>   
            </div>
            <div class="form-group <?php echo (!empty($password_err)) ? 'has-error' : ''; ?>">
                <div class="col-xs-2">
                    <label>Password</label>
                    <input type="password" name="password" class="form-control">
                    <span class="help-block"><?php echo $password_err; ?></span>
                </div>
            </div>
        <div class="form-group">
            <input type="submit" class="btn btn-primary" value="Login">
        </div>
</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Answer 1

使用以下代码

在此处查看演示https://www.bootply.com/v5nmPRdDmR

    <div class="row">
      <div class="col-md-3"></div>
      <div class="col-md-3">
        <h2>Login</h2>
        <p>Please fill in your credentials to login.</p>
        <form class="form-horizontal" action="" method="post">
            <div class="form-group">
              <label>Username</label>
              <input type="text" name="username" class="form-control" value="">
              <span class="help-block"></span>
            </div>   
            <div class="form-group">
              <label>Password</label>
              <input type="password" name="password" class="form-control">
              <span class="help-block"></span>
            </div>
          <div class="form-group">
            <input type="submit" class="btn btn-primary" value="Login">
          </div>
        </form>
      </div>
      <div class="col-md-3"></div>
    </div>

Answer 2

比使用offset类的@ild_flue更简单一点。见https://www.bootply.com/7i5NQn4fiL

<div class="row">
    <div class="col-md-3 col-md-offset-3">
        <h2>Login</h2>
        <p>Please fill in your credentials to login.</p>
        <form class="form-horizontal" action="" method="post">
            <div class="form-group">
                <label>Username</label>
                <input type="text" name="username" class="form-control" value="">
                <span class="help-block"></span>
            </div>   
            <div class="form-group">
                <label>Password</label>
                <input type="password" name="password" class="form-control">
                <span class="help-block"></span>
            </div>
            <div class="form-group">
                <input type="submit" class="btn btn-primary" value="Login">
            </div>
        </form>
    </div>
</div>

自举3表格的位置

2 个答案: