Heim > Web-Frontend > HTML-Tutorial > Div在浏览器中居中显示_html/css_WEB-ITnose

Div在浏览器中居中显示_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:15:49
Original
1127 Leute haben es durchsucht

各位大虾,请问怎样让DIV在浏览器居中显示?如果设他的边距的话,换个尺寸的显示器就有不一样了,谢谢了!!!


回复讨论(解决方案)

设置CSS:

div{
margin-left:auto;
margin-right:auto;
}

这个需要动态设置Div的位置
style="position:absolute;top={1}px;left={2}px;"
如上,你的Div的样式需要设置为这个,但top和left是需要动态计算的。
问题点就是要动态的获取浏览器窗口的尺寸。于是解决办法如下:

<html> <head>     <title>DIV居中显示</title>         <script type="text/javascript"> 		var setDivCenter = function(divId){			var oDiv = document.getElementById(divId);			oDiv.style.position = "absolute";			oDiv.style.top = (document.body.offsetHeight - 150) / 2 + "px";//这个150是div的高度			oDiv.style.left = (document.body.offsetWidth - 200) / 2 + "px";//这个200是div的宽度		};	        </script> </head> <body onload="setDivCenter('dvCenter')"> 	<div id="dvCenter" style="width:200px;height:150px;background-color:red;">		我在浏览器的中间	</div></body> </html> 
Nach dem Login kopieren

刚刚写的,已经通过测试~~

非常感谢!!!!!!

我要看看怎么解决

看看是怎么解决的

2楼给力 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage