can the achor point of a div be changed?

Forum Moderators: not2easy

Message Too Old, No Replies

can the achor point of a div be changed?

nelsonm

2:12 am on Aug 11, 2011 (gmt 0)

Hi all,

I believe the answer is NO, but i'll ask anyway.

I know i can position:fixed a div anywhere on a page. The problem is that the anchor point of the div is always the top left corner of the div. So if i want to center the div on the web page, the div does not look quite centered.

So my question is:
Does css or any other aspect html allow you change the anchor point of a div to its center?

I know i can use another div as a sudo anchor point for the div i want positioned, i was just hoping that i did not have to. I also know i can use jquery or jquery ui to accomplish the same effect if i have to.

Thanks

lucy24

3:54 am on Aug 11, 2011 (gmt 0)

More information may help. Is this a top-level div? That is, there may be stuff inside it, but nothing above (outside) it? Are there other divs to the left or right? Do you have any information about the div's size? Specifically, its width in either ems or pixels, determined by its content.

If you can specify its width, most-but-not-all browsers will honor {margin-left: auto;} so it comes out centered.

Oh yes, and by "anchor point" you mean the position of the div itself, right? Not the position of other elements that might come inside the div?

Any chance of making a pseudo-div using a background-image, which can be positioned exactly as you like?

Paul_o_b

7:45 am on Aug 11, 2011 (gmt 0)

Hi,

If you are centring the element with left 50% then as you say the left corner will be at the central position and not the element itself. If the element has a fixed width you could then simply drag it back bu half it's width with a negative margin.

The downside of that technique is that as you close the window smaller than the element's width the element slides off the left side of the browser and cannot be reached.

A better method for ie8+ is to use left:0 and right:0 and then use auto margins also. This only applies to fixed width elements though otherwise they end up being 100% wide.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.central {
width:200px;
height:200px;
background:red;
border:1px solid #000;
position:fixed;
left:0;
right:0;
margin:auto;
top:25px;
text-align:center;
}
*+html .central{/* ie7 fix*/
left:50%;
right:auto;
margin-left:-100px;
}
/* IE6 doesn't understand position:fixed*/
</style>
</head>
<body>
<div class="central">Test</div>
</body>
</html>

IE6 doesn't understand fixed positioning so if you want to support IE6 you will need to set up alternative rules. Also be very careful with fixed positioning as it rarely does what people expect and is very hard to make usable. Its best used for limited content in headers or footers fixed to the viewport. Once a fixed element goes outside the viewport it is forever unreachable even by scrollbars because fixed elements do not scroll.

nelsonm

12:46 pm on Aug 11, 2011 (gmt 0)

Thanks for relying...

I know i can center the div, at least horizontally, using:

div {position:fixed; top: 50%; margin: 0 auto;}

but vertically, it is centered by the upper left hand corner of the div, not the center of the div. "margin: auto auto;" does not work vertically.

Paul_o_b

1:33 pm on Aug 11, 2011 (gmt 0)

What is is that you are trying to do exactly?

Does it need to be fixed positioned?

If not you can do this for fixed height and width elements.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html,body{
margin:0;
padding:0;
height:100%;
}
.central {
width:200px;
height:200px;
background:red;
border:1px solid #000;
margin:auto;
text-align:center;
clear:both;
}
.push{
float:left;
width:100%;
height:50%;
margin-top:-100px;
clear:both
}
</style>
</head>
<body>
<div class="push"></div>
<div class="central">Test</div>
</body>
</html>

If it needs to be fixed positioned then you will need the negative top margin approach I mentioned before.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html,body{
height:100%;
margin:0;
padding:0
}
.central {
width:200px;
height:200px;
background:red;
border:1px solid #000;
position:fixed;
left:0;
right:0;
margin:auto;
top:50%;
margin-top:-100px;/* half height of element */
text-align:center;
}
*+html .central {/* ie7 fix*/
left:50%;
right:auto;
margin-left:-100px;
}
/* IE6 doesn't understand position:fixed*/
</style>
</head>
<body>
<div class="central">Test</div>
</body>
</html>

rocknbil

4:42 pm on Aug 11, 2011 (gmt 0)

but vertically, it is centered by the upper left hand corner of the div, not the center of the div. "margin: auto auto;" does not work vertically.

So you're looking for vertical "centering" then? You can use the vertical parts of the Dead Centre [wpdfd.com] exercise. The way it works is you have an absolutely positioned "horizon" line of 1 px height, then inside that you position your content divs.

Beware of the horizontal position part of the exercise though: if the screen gets too narrow (say, iPad, etc.) the div starts to float off the screen to the right. Tricks with margin:auto fix that though.