• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 234
  • Last Modified:

Absolute positioning

 Using CSS and the Style attribute, I can theoretically position any element anywhere on the page.
   In practice however, because the absolute positioning is done with the top left corner of the element, it seems to be almost impossible to force an element to go to the very center of the page, or to be at the very end. In other words an absolute position of 50% does not center the element, but its top left corner.
   This seems crazy to me, but still...

   Is there any way to get around this?
0
Centsi
Asked:
Centsi
  • 3
  • 2
1 Solution
 
nettromCommented:
I believe that using regular CSS it should be possible to center the element if you set all margins to "auto".  e.g:

<div style="margin:auto;">
content goes here
</div>

then it should be centered.  this may not be particularly well-supported though.  so usually when I want something centered I use JavaScript.

<script type="text/javascript">
function myWinHeight(myWindow) {
  if(document.layers) {
   return(myWindow.innerHeight);
  } else if(document.all) {
   return(document.body.clientHeight);
  }
}

function myWinWidth(myWindow) {
  if(document.layers) {
   return(myWindow.innerWidth);
  } else if(document.all) {
   return(document.body.clientWidth);
  }
}

function myLayerWidth(layerID) {
  if(document.layers) {
return(document.layers[layerID].document.width);
  } else if(document.all) {
return(document.all[layerID].clientWidth);
  }
}

function myLayerWidth(layerID) {
  if(document.layers) {
    return(document.layers[layerID].document.width);
  } else if(document.all) {
    return(document.all[layerID].clientWidth);
  }
}

function myLayerHeight(layerID) {
  if(document.layers) {
    return(document.layers[layerID].document.height);
  } else if(document.all) {
    return(document.all[layerID].clientHeight);
  }
}

function myMoveTo(layerID, xpos, ypos) {
  if(document.layers) {
    document.layers[layerID].moveTo(xpos, ypos);
  } else if(document.all) {
    document.all[layerID].style.left = xpos;
    document.all[layerID].style.top = ypos;
  }
}

function centerLayer(layerID) {
  var winWidth = myWinWidth(self);
  var winHeight = myWinHeight(self);
  var layerWidth = myLayerWidth(layerID);
  var layerHeight = myLayerHeight(layerID);

  var leftPos = Math.floor((myWinWidth-myLayerWidth)/2);
  var topPos = Math.floor((myWinHeight-myLayerHeight)/2);

  myMoveTo(layerID, leftPos, topPos);
}
</script>

and then invoke on load.  example:

<body onload="centerLayer('myDiv')">

<div id="myDiv" style="position:absolute;">
....content goes here...
</div>

(all code written from the top of my head, if there are errors let me know and I'll check my previously written scripts and supply code that works (I've done this probably a half-dozen times now) :)
0
 
mayhewCommented:
If you know the height and width in pixels of your object, you can use javascript and css (dhtml) to center.

obj.style.pixelleft = (screen.width-400)/2


where 400 is the width of your element, for example.


Note, the code above is IE.  DHTML opens a can of worms as far as cross browser code goes.

That might not be a problem for you, I just thought I'd mention it.
0
 
CentsiAuthor Commented:
  Firstly, unluckilly, I don't know the height of my image(s).
   Secondly, for me, that is too much javascript! and thirdly, I tried margin: auto, but I think I put it in the wrong place: should it go in a div which contains the image? I tried putting margin: auto in the img tag itslef which had no affect.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
nettromCommented:
it should go into the div.  so if the div contains an image do:

<div style="margin:auto;">
<img src=" ... ">
</div>

the JavaScript isn't too difficult to use, you don't have to worry about the code, all you need to do is to call one function in the onload, the rest is simply cut'n'paste. :)
0
 
CentsiAuthor Commented:
 I have now tried margin: auto in a containing div, and in the body, but it seems to make no difference.
  What are the other options with margin: ?
  (I am at the moment only aiming to work with IE5)
0
 
nettromCommented:
I have researched a bit further into the CSS level 1 & CSS level 2 specifications, as well as some newsgroup posts.  the result is not pleasing.  currently, there seems to be no support for centering the content both vertically and horisontally without the use of a scripting language.

it's possible to center the content of the DIV using "text-align:center", so if the content is an image it can easily be centered horisontally.  the problem is centering it vertically though.  so far, no support, sorry.

so, in short, you'll have to use the JavaScript solution I posted earlier, or you won't get the centering you're looking for.
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now