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*/
}
精彩评论