Solved

Absolute positioning

Posted on 2000-02-16
6
216 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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit (http://en.wikipedia.org/wiki/PHPUnit) and similar technologies have enjoyed wide adoption, making it possib…
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

758 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

19 Experts available now in Live!

Get 1:1 Help Now