html – Div水平中心和垂直中间

html – Div水平中心和垂直中间,第1张

概述参见英文答案 > Best way to center a <div> on a page vertically and horizontally?                                    21个 我想对齐一个div的水平中心垂直中间的一个页面的正文. css: .loginBody { width: 100%; height: 100%; 参见英文答案 > Best way to center a <div> on a page vertically and horizontally?21个
我想对齐一个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水平中心和垂直中间所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1132122.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-30
下一篇 2022-05-30

发表评论

登录后才能评论

评论列表(0条)

保存