使用CSS將文檔居中放置在固定寬度的佈局中

固定寬度的佈局可能很難與一些流行的瀏覽器集中在一起,但只需幾行代碼就可以實現。

這裡的如何

  1. 在HTML編輯器中用CSS樣式表創建一個新的Web頁面。
  2. 創建一個div元素作為頁面上的主要元素,您將在頁面上存儲所有內容。
  3. 給該div元素一個在頁面上唯一的ID。
  4. 打開你的CSS樣式表並設置div元素的寬度。 div#main {width:750px; }
  5. 添加自動頁邊距以居中您的div。 div#main {width:750px; margin-left:auto; margin-right:auto}
  6. 要修復它為Netscape 4和IE 4 - 6( 怪癖模式 )添加一個文本對齊的身體。 body {text-align:center; }
  7. 但是所有的文本都是居中的,所以通過添加text-align:left來重新對齊#main div中的文本。 在那裡。 div#main {width:750px; margin-left:auto; margin-right:auto; text-align:left; }
  8. 保存你的頁面和你的樣式表。
  9. 在幾個Web瀏覽器中測試。

小費

這將使佈局框居中,但不包含其內容。 使用文本對齊來居中內部內容。