尊敬的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;
}
我建议使用偏移方法将表单水平居中。
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<!-- the form content -->
</div>
</div>
</div>
要将框垂直居中：http：//jsfiddle.net/x1cg15e3/
这是一种display：table方法，其中该行是垂直对齐的表格单元格。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句