DIV中心不工作的IE

我有这个CSSDIV中心不工作的IE

position:relative; 
margin: 0 auto; 
top:50%; 
width:15px; 
height:15px; 
background-color:#fff; 
-moz-border-radius: 15px; 
-webkit-border-radius: 15px; 
cursor:pointer;

其上的镀铬居中罚款和停留在顶端的IE和FF。

删除和更改位置：

这里有什么错？

感谢让

来源

2010-05-31 X10nD

html是怎么样的？你添加了文本对齐：中心到父元素？ – baloo 2010-05-31 09:16:45

将此视为父母 – X10nD 2010-05-31 09:25:44

#div { 
    position:relative; 
    margin-left:-7.5px; // Half your width in negative 
    margin-top:-7.5px; // Half your height in negative 
    top:50%; 
    left:50%; 
    width:15px; 
    height:15px; 
    background-color:#fff; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    cursor:pointer; 
}

这将在所有的浏览器。 IE浏览器渲染可能会使用有效的代码变得糟糕，但这对我来说是一种经过验证的方法，适用于通用工作。

要编辑此项，只需将负边距值更改为匹配div元素的一半高度或宽度即可。

来源

2010-05-31 09:26:05 duckbox

div必须位于页面的中心 – X10nD 2010-05-31 09:29:03

此代码呈现以IE6-8和其他浏览器中为我提供的维度为中心。 – duckbox 2010-05-31 09:36:09

margin: 0 auto;对于水平居中应该适用于IE6 +，但只有当您处于标准模式时才能正常工作。确保你的HTML中有你的include a Standards Mode doctype，否则你会陷入怪癖模式，在那里什么都不能正常工作。

要找出特定页面是否处于标准模式，请在地址栏中输入javascript:alert(document.compatMode)。 CSS1Compat很好; BackCompat是怪癖。

对于没有绝对定位的垂直居中，top: 50%只有在父元素具有明确的高度时才有意义。因此，如果您打算将顶部降低到浏览器高度的一半，那么您需要在元素的每个祖先上指定100%高度，例如。至少：

html, body { height: 100%; }

来源

2010-05-31 10:49:34 bobince

尝试使用margin-top: 30%;而不是top:50%;
没有position:relative;要求。

编辑
对于在IE中对齐中心，我使用div-wrapper寻求帮助。
这是我所有的代码

<html> 
    <head> 
     <style type='text/css'> 
      #myDivWrapper { 
       text-align: center; /* x axis for ie*/ 
      } 
      #myDiv { 
       /* set position */ 
       margin: 0 auto; /* x axis */ 
       margin-top: 30%; /* y axis */ 

       /* draw div */ 
       background-color: red; 
       width: 200px; 
       height: 200px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id='myDivWrapper'> 
      <div id='myDiv'></div> 
     </div> 
    </body> 
</html>

来源

2010-11-27 07:42:23 diewland

DIV中心不工作的IE

回答

相关问题