开发者

CSS center in IE6, 7, and 8

This code works for IE7 and 8 but not for 6. How can I get it to work for 6. Or is there a better way to do it?

#contentLoading {
width:90px;
height: 90px;
position: fixed;
top: 50%;
left: 50%;
background:url(_img/ajax-load开发者_Python百科er4.gif) no-repeat center #fff;
text-align:center;
padding:10px;
font:normal 16px Tahoma, Geneva, sans-serif;
border:2px solid #666;
margin-left: -50px;
margin-top: -50px;
z-index:2;
overflow: auto;
}


Did you know that IE6 does not support position: fixed;? It will be rendered as a static element.


I usually use something like:

#contentLoading {
  width: 90px;
  margin-left: auto;
  margin-right: auto;
}


If you'd like to center the #contentLoading div within a container you can do it like so:

#contentLoading {
   width: 500px; /* whatever width you want */
   margin: 0px auto; /* top and bottom margin of zero, left and right are automatically calculated based on the space available in the enclosing container */
}


For Ie6, you need to text-align:center the body in your CSS, and then style the main wrapping div with text-align:left, to re-align the text toe the left.

Here is a example.

body{
    text-align: center; /*This alligns all content to the center for IE6*/
}

#mainWrapper{
    width: 900px;
    margin: 0 auto;
    text-align: left; /*This re aligns all content within this id to the left*/
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜