html中如何使一个table或者div永远处于中间位置? 50
我希望不管浏览器是什么高度这个table或div始终处于中间,横向和纵向都是在中间位置的
有什么办法吗? 展开
需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html,编写问题基础代码。
2、在index.html中的<body>标签中,输入html代码:
reset();
window.onresize = function () {
reset();
}
function reset() {
var left = (window.innerWidth - $('div').width())/2;
var top = (window.innerHeight - $('div').height())/2;
$('div').css('margin-left', left + 'px');
$('div').css('margin-top', top + 'px');
}
3、浏览器运行index.html页面,此时无论怎么拉伸窗口,div都会自动调整到屏幕正中央。
html中使一个table或者div永远处于中间位置,首先需要理解块元素的概念,如div、table都是width和height属性,然后在通过css中的一个margin属性,来实现居中,具体用法看下图:
不管浏览器的宽度是多少,这个属性就会将div居中,具体看下代码:
<html>
<head>
<style>
#round{
width:400px; //通过给divwidth和heigh值,在通过margin属性来定位
height:200px;
margin:0 auto;
}
table{ //通过给divwidth和heigh值,在通过margin属性来定位
width:300px;
height:50px;
margin:0 auto;
}
</style>
</head>
<body>
<div id="round">
<p>我会居中</p>
</div>
<table>
<tr>
<td>我会居中</td>
</tr>
</table>
</body>
</html>