DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> margin:0pxauto居中問題解決方案
margin:0pxauto居中問題解決方案
編輯:CSS詳解     

本文向大家描述一下margin:0pxauto居中問題,使用margin:0pxauto;居中是大家在做CSSdiv定位時的最常用方法,這裡總結的內容在IE67以及fifefox下都可正常使用。

margin:0pxauto居中問題
 
margin:0pxauto;適用於div與其它無素,比如p,img等。

使用margin:0pxauto;居中是大家在做CSSdiv定位時的最常用方法,但是據我自己的使用過程來看,常有居中不了的情況。本文所總結的內容,在IE67以及fifefox下都可正常使用。

下面來逐一分解一下:

1:與margin:100px混用,導致無法居中。 

這種情況下,因為前面設了margin:0pxauto;,但是後面又設了margin:100px,這明顯是相矛盾的,不僅如此,如果同時使用了margin:0pxauto;和float:left,也一樣都不生效。 

2:沒有指定DOCTYPE。 

DOCTYPE是指定浏覽器以哪一種標准解析Html代碼,如果不指定,極有可能會不生效。
 
我們常見有人寫html,是直接以<html>開頭的,這種情況,我們只要再加上DOCTYPE頭即可以,最好是直接從dw中新建一個html頭,然後從中再做修改。完整的Html頭如下: 

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHtml1.0Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
  3. <HtmlXMLnsHtmlXMLns="http://www.w3.org/1999/xHtml">
  4. <head>
  5. <metahttp-equivmetahttp-equiv="Content-Type"content="text/Html;charset=utf-8"/>
  6. <title>無標題文檔</title>
  7. </head>
  8. <body>
  9. 主題內容
  10. </body>
  11. </Html>

 3:DOCTYPE前還有代碼,導致不生效。 
 
我試了一下,只要在

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHtml1.0Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">

這一句前加了一個<!--說明文字-->這樣的注釋,也同樣出現了margin:0pxauto;無法居中的情況。

4:使用text-align:center。

這是下下之策,如果上面margin:0pxauto;用了怎麼都不行,那到body中加上text-align:center;吧,如此一下不僅是div,文字也會居中顯示。
然後可以再到細化的CSS中,把相應容器再設成text-align:left再達到文字靠左的效果。

【編輯推薦】

  1. CSS Positioning定位詳解
  2. IE6.0對padding的解讀分析
  3. IE6雙倍margin間距解決方法
  4. CSS overflow溢出屬性
  5. CSS中cellspacing和cellpadding屬性用法揭秘
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved