Solved

Absolute positioning

Posted on 2000-02-16
6
217 Views
Last Modified: 2013-12-25
 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
Comment
Question by:Centsi
  • 3
  • 2
6 Comments
 
LVL 7

Expert Comment

by:nettrom
ID: 2526520
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
 
LVL 5

Expert Comment

by:mayhew
ID: 2532677
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
 

Author Comment

by:Centsi
ID: 2534550
  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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 7

Expert Comment

by:nettrom
ID: 2534560
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
 

Author Comment

by:Centsi
ID: 2538364
 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
 
LVL 7

Accepted Solution

by:
nettrom earned 100 total points
ID: 2543025
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

919 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now