好吧,我已经为此阅读了很多解决方案,但没有一个正常工作。
我不想将它对齐水平中心,它应该与垂直中心对齐,仅限于页面。显然,页面大小是动态的,DIV高度也是动态的。
我在 -
创建了一个jsfiddlehttp://jsfiddle.net/yesprasoon/mukKB/
你可以在CSS中看到height: 200px;
,它运作良好。但是如果div大小改变怎么办?
答案 0 :(得分:1)
jQuery解决方案,这里是FIDDLE
$(function(){
var wHgt = $(window).innerHeight(),
lHgt = $('#loginForm').outerHeight();
$('#loginForm').css({ top: wHgt/2 - lHgt/2 + 'px' });
$(window).resize(function(){
var wHgt = $(window).innerHeight(),
lHgt = $('#loginForm').outerHeight();
$('#loginForm').css({ top: wHgt/2 - lHgt/2 + 'px' });
});
});
答案 1 :(得分:1)
纯CSS解决方案。
HTML:(只添加了一个空的范围,评论很重要)
<span class="Centerer"></span><!--
--><div class="vertical-centre" id="loginForm">
<form>
<div id="welcometext2" style="text-align:center;"><b>Welcome to LC Inventory App</b>
</div>
<br />
<input type="text" name="username" id="username" value="" placeholder="Username" />
<input type="password" name="password" id="password" value="" placeholder="Password" />
<input type="submit" value="Login" id="submitButton" />
</form>
</div>
<强> CSS:强>
*
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body
{
height: 100%;
}
.vertical-centre
{
padding: 0 15px;
width: 100%;
display: inline-block;
vertical-align: middle;
}
.Centerer
{
display: inline-block;
height: 100%;
vertical-align: middle;
}