Register  |  Login



Advertisement

Start Your Own Q&A Site

Create your own Q&A site easily, allowing you to quickly grow a new community around any subject matter or generate new organic traffic for your existing website.

Question

Status: Open Points: 75 Time: 07:17 - Aug 04, 2008  

david

how to center a div on the screen?

I need to center a div on the screen (through javascript), but I'm having trouble doing so.
This is my code:
var objLeft = (document.body.clientWidth - pleaseWaitBox.offsetWidth) / 2;
var objTop = (document.body.clientHeight - pleaseWaitBox.offsetHeight) / 2;
objLeft = objLeft + document.body.scrollLeft;
objTop = objTop + document.body.scrollTop;

// Position object
pleaseWaitBox.style.position = "absolute";
pleaseWaitBox.style.top = objTop + "px";
pleaseWaitBox.style.left = objLeft + "px";

Do you know what I'm doing wrong or if there is another better way of doing it?

Thanks,
David

Categories: 

HTML Web Design
JavaScript Websites
Answer Discussion
Tutorials

 

vivekwin09

Date:: Aug 05, 2008

Time:: 09:03

this very easy to center the div .
<div algin="center"><div></div></div>

david

Date:: Aug 06, 2008

Time:: 11:28

Sorry, but I think you misunderstood my question.
It needs to be horizontically and vertically centered and working also if the user has scrolled down on the page.

Muhammad Amman

Date:: Sep 08, 2009

Time:: 05:31

Mr.David it is better that u first define main div then apply ur code with in that div ok...

admin

Date:: Nov 27, 2009

Time:: 09:15

The question looks to be abandoned by the user who asked it. If no action is taken within 2 days, a Quomon Moderator will consider closing the question and distributing the points.

The Quomon Team

roooberto

Date:: Mar 16, 2010

Time:: 19:04

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <title>Example Vertical alignment of content with JavaScript &amp; Horizontal with CSS</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <style type="text/css">
<!--
   body {
    margin: 0;
    padding: 0;
    font: 12px/1.5 verdana, arial, helvetica, sans-serif;
    text-align: center; /* Takes care of horizontal alignment in Internet Explorer */

   }
   #content {
    position: relative; /* Needed for Safari */
    margin: auto; /* Takes care of horizontal alignment in standards compliant browsers */
    text-align: left;
    width: 600px;
    height: 200px;
    background-color: #fc0;
   }
   h1, p {
    margin: 0;
    padding: 1em;
   }
   h1 {
    font-size: 12px;
    line-height: 1.5em;
   }
-->
</style>
  <script type="text/javascript">
  <!--
  function getWindowHeight() {
   var windowHeight = 0;
   if (typeof(window.innerHeight) == 'number') {
    windowHeight = window.innerHeight;
   }
   else {
    if (document.documentElement && document.documentElement.clientHeight) {
     windowHeight = document.documentElement.clientHeight;
    }
    else {
     if (document.body && document.body.clientHeight) {
      windowHeight = document.body.clientHeight;
     }
    }
   }
   return windowHeight;
  }
  function setContent() {
   if (document.getElementById) {
    var windowHeight = getWindowHeight();
    if (windowHeight > 0) {
     var contentElement = document.getElementById('content');
     var contentHeight = contentElement.offsetHeight;
     if (windowHeight - contentHeight > 0) {
      contentElement.style.position = 'relative';
      contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
     }
     else {
      contentElement.style.position = 'static';
     }
    }
   }
  }
  window.onload = function() {
   setContent();
  }
  window.onresize = function() {
   setContent();
  }
  //-->
  </script>
 </head>

 <body>
  <div id="content">
   <h1>Content</h1>
   <p>This content should be centered in your browser window. CSS is used for horizontal alignment, while scripting is used for vertical alignment.</p>
  </div>
 </body>
</html>

Answer this Question

New User

Email:

Upon submission of this form, you will automatically be registered as a Quomon user and we will send your login information to this address

Registered User

Username:

Password:
Forgot Your Password?

Tutorials cannot be submitted until the Answer Discussion is complete.

Submit answers in the Answer Discussion area

Ask a Question

Have a new question? Ask!

You have 100 characters to use



Top Experts

View More

Rank

Expert

Points

1.
nidhi

10354

2.

 oracleofDelphi

6493

3.

 rcastagna

5596

4.

 LAGM

4848

5.

 PeterNZ

3487

6.

 gonzalo

2840

7.

 Mason

2770

8.

 jgivoni

2303

9.

 xarcus

1820

10.

 Anpanman

917

Become an Expert

Register today to share your knowledge with the community and be recognized and rewarded for your contributions.


Register Here




"Psst, Quomon is a great site. Pass it on."     Tell a Friend  |   Link To Us  |   Save to Delicious  |   Digg! Digg it

© 2005-2012   Quomon Small Logo Help  |  Revenue Sharing  |  Advertising  |  Corporate Solutions  |  Link To Us  |  About Us  |  Contact Us  |  Terms of Use  |  Privacy  |  All Questions


Language Options

English:

 www.quomon.com

Español:

 www.quomon.es

Sponsors

Questions and Answers Software