Fatal编程技术网
  • css/
  • Css div中心不适用于IE

Css div中心不适用于IE

css

Css div中心不适用于IE,css,Css,我有这个css 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的顶部 移除和更改位置： 这里怎么了 谢谢 琴 这将适用于所有浏览器。IE渲染可能是可怕的有效代码，但这是一个尝试和测试

我有这个css

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的顶部

移除和更改位置：

这里怎么了

谢谢 琴

这将适用于所有浏览器。IE渲染可能是可怕的有效代码，但这是一个尝试和测试的方法为我的通用工作

要编辑此内容，只需更改负边距值以匹配div元素高度或宽度的一半。

边距：0自动应该可以正常工作，但前提是您处于标准模式。确保你在你的HTML，否则你会陷入怪癖模式，没有什么工作正常

要确定特定页面是否处于标准模式，请在地址栏中输入
javascript:alert（document.compatMode）
CSS1Compat
良好
BackCompat
是一种怪癖

对于没有绝对定位的垂直居中，仅当父元素具有明确的高度时，
top:50%
才有意义。因此，如果要将顶部向下推至浏览器高度的一半，则需要在元素的每个祖先上指定
100%
高度，例如至少：

html, body { height: 100%; }
尝试使用
margintop:30%而不是
顶部：50%

无
位置：相对需要

编辑

对于IE中的对齐中心，我使用div包装器提供帮助。

这是我的全部代码


<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>




#myDivWrapper{
文本对齐：居中；/*ie的x轴*/
}
#myDiv{
/*设定位置*/
边距：0自动；/*x轴*/
页边距顶部：30%；/*y轴*/
/*绘图分区*/
背景色：红色；
宽度：200px；
高度：200px；
}

html是什么样子的？您是否在父元素中添加了text align:center？div必须位于页面的中心。此代码将IE6-8和其他浏览器中为我提供的尺寸居中显示。

<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>