求高手帮助解决页面定位问题---------急！！！！

gengliangyu 2011-05-06 05:32:08

我有一个有滚动条的div元素，我如何可以让一个div中的元素显示在这个div的垂直位置的中间部分。

我查了一下，发现div里面有scrollIntoView这个方法，但是它只能把当前元素定位到div的顶部或者底部，不能定位到中间。

哪位大侠对这个比较清楚,不吝赐教！！！

...全文

134 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

gengliangyu 2011-05-09

打赏
举报

[Quote=引用 8 楼 liuhuan304 的回复:]

用绝对定位，POSITON:ABSOLUTE,固定高度。
然后采用正负相补的方法，比如高度是100，那就.TOP：50%，margin-top:-50;
[/Quote]

我的页面是动态的，具体是什么样子，是由后台数据来决定的，所以我不能把大div里面的小div设置成absolute。

我现在的需求就是如果让你一个大div显示的内容动态的滚动到里面的一个小div上去。

gengliangyu 2011-05-09

打赏
举报

[Quote=引用 6 楼 yqyqyoyo 的回复:]

点test 按钮的时候，往div中加入top:50%样式。
[/Quote]

我真实的需求是动态的，不一定要把那个元素放到最外层的那个div的中间。
我试着用 obj.style.top="50%". 但是不好用。

liuhuan304 2011-05-09

打赏
举报

用绝对定位，POSITON:ABSOLUTE,固定高度。
然后采用正负相补的方法，比如高度是100，那就.TOP：50%，margin-top:-50;

一经注册不得修改 2011-05-09

打赏
举报

我一般是line-height 跟 height设置成一样的数值实现垂直居中

yqyqyoyo 2011-05-09

打赏
举报

点test 按钮的时候，往div中加入top:50%样式。

gengliangyu 2011-05-09

打赏
举报

可能是我一开始没说清楚，这样吧，我举个简单的列子。

当点击 Test 按钮的时候，如何才能把如下的代码中的 "testDiv" 这几个字定位到页面的上下的中间位置。
代码如下：







<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

	<head>

		<title>MyHtml.html</title>

	</head>



	<script type="text/javascript" language="javascript">

		function aaaaa() {

			

			var cont=document.getElementById("testDiv");

			var wrapH=cont.parentNode.scrollHeight;

			var contH=cont.offsetHeight;

			cont.style.top=(wrapH-contH)/2+"px";

		}



  	</script>

	<body>

		

		<input type="button" value="Test" onclick="aaaaa()" />

		<div style="background-color: #FFFF00; width: 100%; height: 700px;overflow: scroll;">

		

			<br/>0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9

			<br/>a<br/>b<br/>c<br/>d<br/>d<br/>f<br/>g<br/>h<br/>i<br/>j<br/>k<br/>l<br/>m<br/>

			<br/>a<br/>b<br/>c<br/>d<br/>d<br/>f<br/>g<br/>h<br/>i<br/>j<br/>k<br/>l<br/>m<br/>

			<br/>a<br/>b<br/>c<br/>d<br/>d<br/>f<br/>g<br/>h<br/>i<br/>j<br/>k<br/>l<br/>m<br/>

			<br/>a<br/>b<br/>c<br/>d<br/>d<br/>f<br/>g<br/>h<br/>i<br/>j<br/>k<br/>l<br/>m<br/>

			<br/>a<br/>b<br/>c<br/>d<br/>d<br/>f<br/>g<br/>h<br/>i<br/>j<br/>k<br/>l<br/>m<br/>

			<br/>a<br/>b<br/>c<br/>d<br/>d<br/>f<br/>g<br/>h<br/>i<br/>j<br/>k<br/>l<br/>m<br/>

			

			

			<br/>

			

			<div id="testDiv" style="position: relative;background-color: red;" >testDiv</div>

			

			<a href="#123">aaaaaaaaaaaaaaaaa</a>



			<br/>0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9

			<br/>a<br/>b<br/>c<br/>d<br/>d<br/>f<br/>g<br/>h<br/>i<br/>j<br/>k<br/>l<br/>m<br/>

			<br/>a<br/>b<br/>c<br/>d<br/>d<br/>f<br/>g<br/>h<br/>i<br/>j<br/>k<br/>l<br/>m<br/>

			<br/>a<br/>b<br/>c<br/>d<br/>d<br/>f<br/>g<br/>h<br/>i<br/>j<br/>k<br/>l<br/>m<br/>

			<br/>a<br/>b<br/>c<br/>d<br/>d<br/>f<br/>g<br/>h<br/>i<br/>j<br/>k<br/>l<br/>m<br/>

			<br/>a<br/>b<br/>c<br/>d<br/>d<br/>f<br/>g<br/>h<br/>i<br/>j<br/>k<br/>l<br/>m<br/>

			<br/>a<br/>b<br/>c<br/>d<br/>d<br/>f<br/>g<br/>h<br/>i<br/>j<br/>k<br/>l<br/>m<br/>

		</div>

		

	</body>

</html>

潮起潮落 2011-05-06

打赏
举报



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

*{

	margin:0;

	padding:0;

}

.wrap{

	width:800px;

	height:500px;

	margin:0 auto;

	background:red;

	overflow:auto;

}

#content{

	width:800px;

	height:150px;

	background:green;

	position:relative;

}

</style>

</head>

<body>

<div style="width:820px;height:300px;overflow:auto;">

	<div class="wrap">

		<div id="content"></div>

	</div>

</div>

<script>

var cont=document.getElementById("content");

var wrapH=cont.parentNode.scrollHeight;

var contH=cont.offsetHeight;

cont.style.top=(wrapH-contH)/2+"px";

</script>

</body>

</html>

IT流渊 2011-05-06

打赏
举报



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>



<body>

<div style="height:1200px; width:250px; background:#F66;vertical-align:middle;">

  <div style=" background:#00F;position:fixed;top:50%">哈哈</div>

</div>

</body>

</html>

参考

se7en 2011-05-06

打赏
举报

用div啊，肯定是div来控制的。

smatiger 2011-05-06

打赏
举报

可以在div中放个table，table里再放div

<div><table width="100%" height="100%"><tr><td align="center" valign="middle"><div></div></td></tr></table></div>

Java 技术交流群：58156559