Div水平中心和垂直中间
Tap*_*ose 16 html css alignment vertical-alignment
我想在body页面的水平中心和垂直中间对齐div .
css:
.loginBody {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */
}
.loginDiv {
position: absolute;
left: 35%;
top: 35%;
text-align: center;
background-image: url('Images/loginBox.png');
width:546px;
height:265px;
}
我有这个HTML:
<body class="loginBody">
<form id="form1">
<div class="loginDiv">
</div>
</form>
</body>
现在它表现得像我想要的那样,但如果我调整浏览器的大小,它就会变得完全扭曲,也许这是因为绝对的定位.我正在展示一些屏幕截图:在调整大小的firefox中:
调整大小的铬:
在调整大小即:
在最大化的窗口中它是:
有没有办法解决这个问题,并使用相对定位实现这个居中对齐？
谢谢.
编辑:
在Firefox中,调整大小时没有滚动条,但它出现在其他浏览器中.
Sti*_*rBF 18
试试这个:
.loginDiv {
position: absolute;
left: 50%;
top: 50%;
text-align: center;
background-image: url('Images/loginBox.png');
width:546px;
height:265px;
margin-left: -273px; /*half width*/
margin-top: -132px; /*half height*/
}
你将它移动到中心,而不是向左和向后移动一半尺寸 - 即使在调整大小时它也会居中
创建一个div用于页面内容,并使用以下css创建一个"content"类.这适用于Jquery Mobile和Android设备的Phonegap.希望它可以帮助某人.
CSS
.content {
width: 100%;
height: 100%;
top: 25%;
left: 25%
right: 25%;
text-align: center;
position: fixed;
}