Question

亲爱的stackoverflow用户，

我正在尝试创建一个只有注册和登录页面的简单网站，以了解如何使用php创建注册和登录系统。 Bootstrap是我用来做网站设计的css库。我需要垂直对齐我的登录表单，但css属性vertical-align: middle;和display: inline-block;似乎无法正常工作。它只会将表单移动到左边，这是我不想要的。它已经水平居中，我只需要它也可以垂直居中。我能做些什么来取得正确的结果吗？

这是我的HTML代码：

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Website - Login</title>
      <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
      <link href="css/loginstyle.css" rel="stylesheet">
  </head>
    <body>

      <nav class="navbar navbar-default">
        <div class="container">
          <div class="navbar-header">
            <a class="navbar-brand" href="index.html">Brand</a>
          </div>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="register.html">Register</a></li>
            <li><a href="#">Log in</a></li>
          </ul>
        </div>
      </nav>

      <div id="loginform" class="container">
        <div class="form">
          <h1 class="text-center">Login</h1>
          <br>
          <form>
            <div class="form-group">
              <label for="emailAddress">Email address:</label>
              <input type="email" class="form-control" id="emailAddress" placeholder="Email">
            </div>

            <div class="form-group">
              <label for="password">Password:</label>
              <input type="password" class="form-control" id="password" placeholder="Password">
            </div>

            <button type="submit" class="btn btn-default">Submit</button>
            <a class="btn btn-default pull-right" href="index.html">Cancel</a>
          </form>
        </div>
      </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>

这是我的css代码：

#loginform {
    max-width: 500px;
    display: inline-block;
    vertical-align: middle;
}

Answer 1

如果您希望表单停留在屏幕中央，可以使用position: absolute执行此操作。

Sidenote ：即使这可能仅仅是为了练习（正如您正在学习的那样），理解/考虑表单如何影响您在较小视口上的布局（您的导航，放置位置）非常重要在一些较小的屏幕等中心的形式可能不合适。）

以下是两个最小的例子：

Mobile First Example Snippet

.loginform h1 {
  margin: 0 0 10px 0;
}
@media (min-width: 500px) {
  .loginform {
    max-width: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /**FOR DEMO ONLY**/
    margin: 0;
    padding: 20px 30px 30px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    background: white;
    /**FOR DEMO ONLY**/
  }
}
@media (max-width: 499px) {
  .loginform {
    /**FOR DEMO ONLY**/
    padding: 30px 30px 60px;
    background: rgba(12, 13, 14, 0.055);
    /**FOR DEMO ONLY**/
    min-width: 100%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.html">Brand</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="register.html">Register</a>
        </li>
        <li><a href="#">Log in</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<form class="loginform" id="loginform">

  <h1 class="text-center">Login</h1>


  <div class="form-group">
    <label for="emailAddress">Email address:</label>
    <input type="email" class="form-control" id="emailAddress" placeholder="Email">
  </div>

  <div class="form-group">
    <label for="password">Password:</label>
    <input type="password" class="form-control" id="password" placeholder="Password">
  </div>

  <button type="submit" class="btn btn-default pull-left">Submit</button>
  <a class="btn btn-default pull-right" href="index.html">Cancel</a>

</form>

示例代码段

.loginform h1 {
  margin: 0;
}
.loginform {
  max-width: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /**FOR DEMO ONLY**/
  margin: 0;
  padding: 20px 30px 30px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  background: white;
  /**FOR DEMO ONLY**/
}
@media (max-width: 500px) {
  .loginform {
    min-width: 100%;
    /**FOR DEMO ONLY**/
    box-shadow: none;
    background: rgba(12, 13, 14, 0.055);
    /**FOR DEMO ONLY**/
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.html">Brand</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="register.html">Register</a>
        </li>
        <li><a href="#">Log in</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<form class="loginform" id="loginform">

  <h1 class="text-center">Login</h1>


  <div class="form-group">
    <label for="emailAddress">Email address:</label>
    <input type="email" class="form-control" id="emailAddress" placeholder="Email">
  </div>

  <div class="form-group">
    <label for="password">Password:</label>
    <input type="password" class="form-control" id="password" placeholder="Password">
  </div>

  <button type="submit" class="btn btn-default pull-left">Submit</button>
  <a class="btn btn-default pull-right" href="index.html">Cancel</a>

</form>

Answer 2

我建议使用偏移方法水平居中表格。

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-sm-offset-3">

    <!-- the form content -->

    </div>
  </div>
</div>

DEMO using your form

More centering examples for Bootstrap

垂直居中框：http://jsfiddle.net/x1cg15e3/

这是一个display：table方法，其中行是一个垂直对齐的表格单元格。

如何在引导程序中垂直对齐我的表单？

2 个答案: