Вот так можно оцентрировать элемент в родительском элементе:
| Код | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content='text/html; charset=windows-1251'>
<meta http-equiv="MSThemeCompatible" content='Yes'>
<meta name="Generator" content='EditPlus 2.21.330'>
<meta name="Author" content='Ciber SLasH'>
<title>JavaScript :: Центрирование элемента в родителе</title>
<script type='text/javascript'>
/*** Размер родителя элемента ***/
function getParentSize(id) {
var elem = document.getElementById(id).parentNode;
var w,h;
if (elem.tagName != "BODY") {
if (elem.clientHeight) {
w = elem.clientWidth;
h = elem.clientHeight;
} else if (elem.offsetHeight) {
w = elem.offsetWidth;
h = elem.offsetHeight;
}
} else if (self.innerHeight) {
w = self.innerWidth;
h = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) {
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
} else if (document.body) {
w = document.body.clientWidth;
h = document.body.clientHeight;
}
return (w || h) ? {width: w, height: h} : 0;
}
/*** Размер скроллинга ***/
function getScrolling(id) {
var elem = document.getElementById(id).parentNode;
var x,y;
if (elem.tagName != "BODY" && elem.scrollTop) {
x = elem.scrollLeft;
y = elem.scrollTop;
} else if (self.pageYOffset) {
x = self.pageXOffset;
y = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop) {
x = document.documentElement.scrollLeft;
y = document.documentElement.scrollTop;
} else if (document.body) {
x = document.body.scrollLeft;
y = document.body.scrollTop;
}
return (x || y) ? {scrollX: x, scrollY: y} : 0;
}
/*** Размер элемента ***/
function getObjSize(id) {
var elem = document.getElementById(id);
var w,h;
if (elem.offsetWidth) {
w = elem.offsetWidth;
h = elem.offsetHeight;
} else if (elem.clip && elem.clip.width) {
w = elem.clip.width;
h = elem.clip.height;
} else if (elem.style && elem.style.pixelWidth) {
w = elem.style.pixelWidth;
h = elem.style.pixelHeight;
}
return (w || h) ? {width: parseInt(w), height: parseInt(h)} : 0;
}
onload = function () {
var parentSize = getParentSize("test");
var scrolling = getScrolling("test");
var scrollX = (scrolling) ? scrolling.scrollX : 0;
var scrollY = (scrolling) ? scrolling.scrollY : 0;
var elem = document.getElementById("test");
var elemSize = getObjSize("test");
var left = Math.round(parentSize.width/2 - elemSize.width/2 + scrollX);
var top = Math.round(parentSize.height/2 - elemSize.height/2 + scrollY);
elem.style.left = left + "px";
elem.style.top = top + "px";
}
</script>
<style type='text/css'>
#test {width: 100px; height: 100px; background: yellow; position: absolute}
</style>
</head>
<body>
<div id='pre' style='height: 300px; position: relative; border: 1px solid; overflow: auto'>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id='test'></div>
</body>
</html> |
Если не нужно учитывать родителя, то так:
| Код | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content='text/html; charset=windows-1251'>
<meta http-equiv="MSThemeCompatible" content='Yes'>
<meta name="Generator" content='EditPlus 2.21.330'>
<meta name="Author" content='Ciber SLasH'>
<title>JavaScript :: Центрирование элемента по окну браузера</title>
<script type='text/javascript'>
/*** Размер родителя элемента ***/
function getParentSize() {
var w,h;
if (self.innerHeight) {
w = self.innerWidth;
h = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) {
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
} else if (document.body) {
w = document.body.clientWidth;
h = document.body.clientHeight;
}
return (w || h) ? {width: w, height: h} : 0;
}
/*** Размер скроллинга ***/
function getScrolling() {
var x,y;
if (self.pageYOffset) {
x = self.pageXOffset;
y = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop) {
x = document.documentElement.scrollLeft;
y = document.documentElement.scrollTop;
} else if (document.body) {
x = document.body.scrollLeft;
y = document.body.scrollTop;
}
return (x || y) ? {scrollX: x, scrollY: y} : 0;
}
/*** Размер элемента ***/
function getObjSize(id) {
var elem = document.getElementById(id);
var w,h;
if (elem.offsetWidth) {
w = elem.offsetWidth;
h = elem.offsetHeight;
} else if (elem.clip && elem.clip.width) {
w = elem.clip.width;
h = elem.clip.height;
} else if (elem.style && elem.style.pixelWidth) {
w = elem.style.pixelWidth;
h = elem.style.pixelHeight;
}
return (w || h) ? {width: parseInt(w), height: parseInt(h)} : 0;
}
onload = function () {
var parentSize = getParentSize();
var scrolling = getScrolling();
var scrollX = (scrolling) ? scrolling.scrollX : 0;
var scrollY = (scrolling) ? scrolling.scrollY : 0;
var elem = document.getElementById("test");
var elemSize = getObjSize("test");
var left = Math.round(parentSize.width/2 - elemSize.width/2 + scrollX);
var top = Math.round(parentSize.height/2 - elemSize.height/2 + scrollY);
elem.style.left = left + "px";
elem.style.top = top + "px";
}
</script>
<style type='text/css'>
#test {width: 100px; height: 100px; background: yellow; position: absolute}
</style>
</head>
<body>
<div id='test'></div>
</body>
</html> |
|