How to center a element in IE6

问题

trying to implement a dialog-box style behaviour using a separate div section with all the stuff inside it.

When the "dialog box" needs to be shown, it has to display at the center of the WINDOW, not in the center of the page, that is, REGARDLESS of the scroling position. Furthermore, the correct solution will not move the "dialog box" if the user scrolls the page.

In Chrome and FF this works using position='fixed' and centering the div in the intuitive way.

This does not seem to work in IE6 (apparently fixed is not supported there).

Any ideas?

回答1:

If I were you I would do it using jQuery and I would suggest you try it out too. This should fit perfectly for jQuery based solution [jQuery Version][1] or try out

body { 
    font: 80% verdana, arial, helvetica, sans-serif;        
    text-align: center; /* for IE */    
}   

#container {        
    margin: 0 auto;   /* align for good browsers */         
    text-align: left; /* counter the body center */
    border: 2px solid #000;         
    width: 80%;     
}

回答2:

Try the method outlined here.

回答3:

Use overflow-y and absolute positioning to emulate fixed positioning in IE6 using the following steps:

Create an absolutely positioned div and give it the desired top and left coordinates on the page
Set html {overflow-y: } to be hidden or visible instead of the default auto or scroll to eliminate the scrollbar for the absolutely positioned div
Set body{overflow-y: } to be auto or scroll to insert a new scrollbar for the body content
Set body { margin:0; height:100% } to make sure the content scrollbar goes the length of the page
Set top and left margins on the body to separate the content from the absolutely positioned div
Make sure the doctype is set to trigger Standards Mode in IE
Set the absolutely positioned div to top:50%; left:50%;
Add position:relative and the desired opacity to the container div

If the doctype is not set, move the html rules to the body tag, and the body rules to a wrapper div

<!DOCTYPE html>
<html>
  <head>
  <style>
  body { margin:0; margin-left: 14em; }

  #fixedbox { position: fixed; top: 1em; left: 1em; width: 10em; }

  #fixedbox { padding: 0.5em; border: 1px solid #000; }

  #container { height: 2000px; }

  @media,
    {
    html { _overflow-y: visible; *overflow-y: auto; }
    body { _overflow-y: auto; _height: 100%; }
    #container { _position: relative; }
    #fixedbox { _position: absolute; _top:50%; _left: 50%; }
    }
   </style>
  </head>
  <body>
    <div id="container">
      Fixed box
    </div>

    <div id="fixedbox">
      Homer
    </div>
  </body>
</html>

来源：https://stackoverflow.com/questions/319057/how-to-center-a-div-element-in-ie6

标签

css

internet-explorer-6

How to center a <div> element in IE6

问题

回答1:

回答2:

回答3: