>有谁知道如何在页面中间而不是在顶部中心对齐div。 必须有白色背景,请在这方面帮助我。 帮助我实现这一点,没有
我的div 是
<div data-role="fieldcontain" >
用户名: <div id="b" style="display: inline-block">
<label for="password"><font size="1" color="black">Password : </font></label>
<input type="password" name="password" id="pwd" data-mini="true" value="" style="width: 45%;float: right"/></div>
好吧,不确定这是否正是您要找的,但这是您在页面中居中元素的方式,假设那里没有其他元素。
<div id='b'>
some element
</div>
<style>
#b{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
width: 100px;
height: 10px;
}
</style>
假设 YourDivClass
是一个位于中心 的div
.YourDivClass
{
position: fixed;
left: 50%;
top: 50%;
background-color: white;
z-index: 100;
height: 400px;
margin-top: -200px;
width: 600px;
margin-left: -300px;
}
由于jQuery Mobile独特的功能,纯CSS不能用于完美的内容居中。
下面是一个专门为jQM创建的工作示例: http://jsfiddle.net/Gajotres/detPg/
$(document).on('pageshow', '#index', function(){
$("div[data-role='fieldcontain']").css('margin-top',getRealContentHeight()/2 - $('#b').height()/2);
$('#b').css('margin-left',$("div[data-role='content']").outerWidth()/2 - $('#b').width()/2);
});
function getRealContentHeight() {
var header = $("div[data-role='header']:visible");
var footer = $("div[data-role='footer']:visible");
var content = $("div[data-role='content']:visible:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
content_height -= (content.outerHeight() - content.height());
}
return content_height;
}
通常水平居中只能用css来实现,但是由于jQM 1.3的新变化,即使它必须通过javascript进行计算。