网络技术博客

注册 | 登录忘记密码？

51cto首页 | 博客 | 论坛 | 招聘

热点文章

顺便给51cto做个广告

51CTO培训学院：五天打造软件测试工程师［Linux博客大比拼］获奖结果揭晓

博主的更多文章>>

css+div让布局居中

2008-06-08 15:26:05

　标签：css div 布局居中　　　[推送到技术圈]

css布局被认为是难以理解的，特别是对新手来说说，我最初学习css的时候也是这种感觉，初学的朋友也向我抱怨过这个问题。其实我感觉当你回过头来再看那些典型的例子的时候会发现真的没什么难以理解的。今天我就介绍两种让布局居中的方法，前几天baidu了一下“css布局居中”，结果没发现有意义的东西，所以今天写这篇文章

方法一：利用auto maigins

先设置一个要居中的div

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

然后css

#wrapper {
width: 720px;
margin: 0 auto;
}

这样在大部分主流浏览器都是可以的，但是在IE6是不能正常显示的，解决办法

修改css

body {
text-align: center;
}
#wrapper {
width: 720px;
margin: 0 auto;
text-align: left;
}

IE会把text-align: center;理解为让所有的东西都居中，这样就解决了兼容问题。

方法二：使用定位和负值空白边

只要改一下css代码

#wrapper {
width: 720px;
position: relative;
left: 50%;
margin-left: -360px;
}

至于为什么这样做大家自己分析下吧，很简单的，没什么大道理。

上一篇 JavaScript使用技巧精萃　　下一篇 PHP分页函数

类别：html+css+div ┆ 技术圈() ┆ 阅读() ┆ 评论() ┆推送到技术圈 ┆返回首页

相关文章

文章评论