Practical solution to center vertically and horizontally in HTML that works in FF, IE6 and IE7

Question :

Practical solution to center vertically and horizontally in HTML that works in FF, IE6 and IE7,

Answer :

What can be a practical solution to center vertically and horizontally content in HTML that works in Firefox, IE6 and IE7?

Some details:

  • I am looking for solution for the entire page.
  • You need to specify only width of the element to be centered. Height of the element is not known in design time.
  • When minimizing window, scrolling should appear only when all white space is gone.
    In other words, width of screen should be represented as:
Read More  Ant build scripts, antcall, dependencies, etc

“leftSpace width=(screenWidth-widthOfCenteredElement)/2″+
“centeredElement width=widthOfCenteredElement”+
“rightSpace width=(screenWidth-widthOfCenteredElement)/2”

And the same for the height:

“topSpace height=(screenHeight-heightOfCenteredElement)/2″+
“centeredElement height=heightOfCenteredElement”+
“bottomSpace height=(screenWidth-heightOfCenteredElement)/2”

  • By practical I mean that use of tables is OK. I intend to use this layout mostly for special pages like login. So CSS purity is not so important here, while following standards is desirable for future compatibility.

,

From

#horizon              {      text-align: center;      position: absolute;      top: 50%;      left: 0px;      width: 100%;      height: 1px;      overflow: visible;      display: block      }    #content          {      width: 250px;      height: 70px;      margin-left: -125px;      position: absolute;      top: -35px;      left: 50%;      visibility: visible      }    

This text is
DEAD CENTRE
and stays there!

That’s the answer Practical solution to center vertically and horizontally in HTML that works in FF, IE6 and IE7, Hope this helps those looking for an answer. Then we suggest to do a search for the next question and find the answer only on our site.

Disclaimer :

The answers provided above are only to be used to guide the learning process. The questions above are open-ended questions, meaning that many answers are not fixed as above. I hope this article can be useful, Thank you