如何在 bootstrap 中垂直对齐我的表单？

Question

尊敬的 Whosebug 用户，

我正在尝试制作一个只有注册和登录页面的简单网站，以了解如何使用 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

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

<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 方法，其中行是一个 table 垂直对齐的单元格。

Answer 2

如果您希望表单位于屏幕中央，您可以使用 position: absolute 来实现。

旁注：尽管这可能只是一个练习（在您学习的过程中），但重要的是 understand/consider 表单如何影响您在较小的布局上的布局视口（您的导航、表单的位置在某些较小的屏幕等的中心可能不理想）。

这里有两个最小的例子：

移动第一个示例代码段

.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>

如何在 bootstrap 中垂直对齐我的表单？

How do i vertically align my form in bootstrap?

html

css

vertical-alignment

twitter-bootstrap