css+div讓佈局居中

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. }
至於爲何這樣作你們本身分析下吧,很簡單的,沒什麼大道理。
相關文章
相關標籤/搜索