您现在的位置: 365建站网 > 365学习 > CSS+DIV设计居中的常见两种方法

CSS+DIV设计居中的常见两种方法

文章来源:365jz.com     点击数:180    更新时间:2009-09-24 22:31   参与评论
例如:.HTML文件代码如下,
<html>
<head>
<title>居中DIV</title>
</head>
<body>
 <div id="mainDiv>
居中的div
</div>
</body>
</html>
则实现居中的方法CSS代码为
第一种方法:
body
{
text-align:center ;
background-color:#ccc;
min-width:780px;
}
#mainDiv
 {
 width:760px;
 border:1px solid white;
 margin:0 auto
}
 第二种
负空白边定位法实现的CSS代码为
body {
text-align:center
 background-color:#ccc;
 min-width:780px;
 }
#mainDiv
 {
width:760px;
margin-left:-380px;
 left:%50;
 positive:relative;
border:1px solid white
}
好了,有人会问为什么要使用“min-width”属性来定义body的最小宽度呢?,而且其最小宽度要大于或等于div的宽度。
如果不怎样,可能会出现页面的内容被挤出浏览器的可视区域,具体这是为什么这个是浏览器的问题,各种浏览器对CSS
 的支持有少许不同。留着大家自己去研究吧!
Tag标签: CSS+DIV

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (180人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------