我基于 bootstrap 框架创建了简单的注册表单，它将集成到网站中:
<link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="/css/bootstrap-responsive.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<body>
<center><h2>Регистрационная форма</h2></center>
<form class="form-horizontal" method='post' action='/contact.php' id='form'>
<fieldset class="myfields">
<div><label>Name: </label><input type='text' name='name' required id='name'></div>
<div><label>Surname: </label><input type='text' name='surname' required id='surname'></div>
<div> <label>Mail: </label><input type='email' name='email' required id='email'></div>
<div><label>Phone: </label><input type='text' name='phone' required id='phone'></div>
<div><label>Skype: </label><input type='text' name='skype' required id='skype'></div>
<div><label>Assess: </label><select name='assistance' id='assistance'>
<option value='With first parameter'>One</option>
<option value='With second parameter'>Two</option>
</select></div>
<input class="btn btn-primary" type='submit' value='Send'>
</fieldset>
</form>
</body>
和这个 CSS 配置:
<style type="text/css">
.myfields label, .myfields input, .myfields select {
display:inline-block;
height: 35px;
}
form {
text-align:center;
}
.myfields label, .myfields select {
text-align:left;
width:100px;
}
.myfields select {
text-align:left;
width:200px;
}
.myfields input {
width:200px;
}
</style>
我怎样才能在页面的垂直中心居中我的注册 block ？垂直对齐在这种情况下不起作用:-( 它可能是 java-script 或 CSS 解决方案，没关系。
最佳答案
将您的页面内容包装在 <div> 中使用 container 的 id 并应用以下 CSS:
#container {
position: absolute;
top: 50%;
height: 400px; /* big enough to wrap around the entire contents */
margin-top: -200px; /* -(this.height / 2) */
}
理论是您将 div 向下“移动”页面 50%，然后将其移回页面，负边距等于高度的一半。
关于html - 我怎样才能在网站上垂直对齐我的注册表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18351203/