css+div让布局居中

时间：2021-04-17 20:27:45

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

方法一 ：利用auto maigins先设置一个要居中的div
  1. <body>
  2. <div id="wrap">
  3. </div>
  4. </body>
 然后css
  1. #wrapper {
  2. width: 720px;
  3. margin: 0 auto;
  4. }
这样在大部分主流浏览器都是可以的，但是在IE6是 不 能正常显示的，解决 办法修改css
  1. body {
  2. text-align: center;
  3. }
  4. #wrapper {
  5. width: 720px;
  6. margin: 0 auto;
  7. text-align: left;
  8. }
IE会把text-align: center;理解为让所有的东西 都居中，这样就解决了兼容问题。方法二：使用定位和负值空白边 只要改一下css代码
  1. #wrapper {
  2. width: 720px;
  3. position: relative;
  4. left: 50%;
  5. margin-left: -360px;
  6. }
至于为什么这样做大家自己分析下吧，很简单的，没什么大道理。
标签：

相关文章