我想对齐一个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 > <form ID="form1"> <div > </div> </form></body>
现在它的行为就像我想要的那样,但如果我调整浏览器的大小,它就会完全扭曲,也许这是因为绝对的定位.我正在展示一些截图:
在调整大小的firefox中:
在调整大小的Chrome中:
调整大小IE:
在最大化的窗口是:
有没有办法解决这个问题,使用相对定位来实现这个对中的对齐?
谢谢.
编辑:
在firefox中,调整大小时不会出现滚动条,但会出现在其他浏览器中.
解决方法 尝试这个:.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*/}
您将其移动到中心,而不是向左和向上延伸一半的尺寸 – 即使在调整大小时也会使它居中
总结以上是内存溢出为你收集整理的html – Div水平中心和垂直中间全部内容,希望文章能够帮你解决html – Div水平中心和垂直中间所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)