您的位置：首页 > 其它

关于div的居中显示

2015-08-21 19:37 435 查看

让一个大的div在页面居中显示:

html代码如下:

<body>
<div id="container"></div>
</body>

不完善的方法:

1、仅仅在IE浏览器中居中

<style type="text/css" media="screen">

* {
padding: 0px;
margin: 0px;
}

/**
*仅仅在IE浏览器中居中
/
body{
text-align: center;
}

#container {
width:1100px;
height: 500px;
border: 1px solid #229;

}
</style>

2、在IE浏览器外，其他的浏览器中居中

<style type="text/css" media="screen">
* {
padding: 0px;
margin: 0px;
}

#container {
width:1100px;
height: 500px;
border: 1px solid #229;
margin: auto; /* 在IE浏览器外的浏览器，实现居中 */

}
</style>

2、在所有的浏览器中居中

<style type="text/css" media="screen">
* {
padding: 0px;
margin: 0px;
}

#container {
width:1100px;
height: 500px;
border: 1px solid #229;

/**
*下面三局代码，实现所有浏览器的居中
/
position: absolute;
left:50%;
margin-left: -550px; /* #container宽度的一半*/

}
</style>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航