Vertically centring the element on the page
This question already has an answer here:
Try below:
Vertical-align will works with display:table;
html{
position: relative;
background-color: #e1e8f0;
font-size:62.5%;
margin: 0px;
padding: 0px;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
height: 500px;
}
.navbar{
border: none;
}
body{
background-color: #e1e8f0;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
position: relative;
height: 500px;
width: device-width;
}
.signup{
position: relative;
height: 100%;
width: 100%;
display:table;
margin: auto auto;
font-size: 1.6em;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
border: 1px solid black;
}
.signup input{
margin:20px;
text-decoration: none;
border: 1px solid #e4e6e8;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
border-radius: 5px;
padding: 2px;
}
.message{
width: 50%;
float: left;
overflow: hidden;
}
.message pre{
overflow: hidden;
}
table{
height: 100%;
margin: auto auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.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"/>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:d v/MEAN Lynda - Developing for the MEAN Stack and MongoDB/projects/others/lib/bootstrap.css">
<link rel="stylesheet" type="text/css" href="E:d v/MEAN Lynda - Developing for the MEAN Stack and MongoDB/projects/others/css/my css.css">
</head>
<body>
<nav class="navbar navbar-default" style="background-color:#222222;color:red;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="file:///E:/d%20v/MEAN%20Lynda%20-%20Developing%20for%20the%20MEAN%20Stack%20and%20MongoDB/projects/others/lib/login.html" style="color:#fff;">SITE NAME</a>
</div>
<div class="collapse navbar-collapse" id="#myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#" style="color:#fff;" >WHO</a></li>
<li><a href="#" style="color:#fff;" >Sign up</a></li>
<li><a href="#" style="color:#fff;" >Login</a></li>
</ul>
</div>
</div>
</nav>
<div class="signup">
<form action="#" class="center-block" method="get">
<table border="black">
<tr>
<td><label for="emailId">Email id</label>
<td><input type="email" placeholder="you@example.com" id="emailId"></input><br>
</tr>
<tr>
<td><label for="password">Password</label>
<td><input type="password" placeholder="********" id="password"></input><br>
</tr>
<tr>
<td><label for="name">Name</label>
<td><input type="text" placeholder="Steve Jobs :)" id="name"></input><br>
</tr>
<tr>
<td></td>
<td><button type="submit" class="btn btn-primary">Sign Up</button></td>
</tr>
</table>
</form>
</div>您必须将样式应用于表单
<style>
form {
margin: 15% 40% 0;
}
</style>
Few Solutions:
You can use flex and it's properties ( justify-content and align-items ) like vertical-align and add these lines to every parent of a child that you want to align vertically (eg: .center )
.center {
display:-webkit-flex;
display:flex;
align-items:center;
justify-content:center;
}
If you don't like the flex solution, you can set the parent's position to "relative" ( position:relative; ), and insert this code to the child:
.center {
position:relative;
}
.center table {
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
Hope it was helpful =]
链接地址: http://www.djcxy.com/p/75882.html上一篇: 如何对齐div中的div中间
下一篇: 垂直居中页面上的元素