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;
- }
至于为什么这样做大家自己分析下吧,很简单的,没什么大道理。
转载于:https://blog.51cto.com/zzjnet/80796