爲什麼div/img不在IE8中心？

我有一個非常簡單的保持頁面，我建立了一個div，錨點和圖像的中心。由於某種原因，它不會以IE8爲中心（任一模式），我希望有人能告訴我爲什麼。我沒有機會在其他IE瀏覽器中嘗試它。我已經在Chrome和FF3中嘗試過，它可以正常工作。爲什麼div/img不在IE8中心？

<html> 
<head> 
<title>Welcome</title> 
<style> 
    #pageContainer {width:300px;margin:0 auto;text-align:center;} 
    #toLogo{border:none; } 
</style> 
</head> 
<body> 
    <div id="pageContainer"> 
    <a href="http://portal.thesit.com" id="toSite"><img src="LOGO_DNNsmall.png" id="toLogo"></a> 
    </div> 
</body> 
</html>

我說這很簡單。 :)

謝謝

佈雷特

來源

2009-05-03 Brettski

反正它無關，與IE瀏覽器版本。它在所有IE-s – DaDa 2009-05-03 08:00:23

中的工作原理是相同的，它更好地使用doctype，一半的錯誤將被修復。 – Mike 2009-05-03 09:11:31

你真的想讓你的網頁工作在怪癖模式嗎？你的HTML中心精細一旦我添加的doctype到強制標準模式：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

<head> 
<title>Welcome</title> 
<style>  
    #pageContainer {width:300px;margin:0 auto;text-align:center;}  
    #toLogo{border:none; } 
</style> 
</head> 

<body> 

<div id="pageContainer"> 
    <a href="http://portal.thesit.com" id="toSite"> 
    <img src="http://stackoverflow.com/content/img/so/logo.png" id="toLogo"></a> </div> 

</body> 
</html>

來源

2009-05-03 05:16:09

添加text-align:center身體。這應該與div上的margin:0 auto結合使用。

您可以在不使用text-align:center的情況下居中對齊，方法是將整個頁面內容封裝在全寬容器中&，然後再設置text-align:center。

<html> 
<head> 
<title>Welcome</title> 
<style> 
    #container {text-align:center;border:1px solid blue} 
    #pageContainer {width:300px; margin:0 auto; border:1px solid red} 
    #toLogo{border:none; } 
</style> 
</head> 
<body> 
    <div id="container"> 
     <div id="pageContainer"> 
     <a href="http://portal.thesit.com" id="toSite"><img src="LOGO_DNNsmall.png" id="toLogo"></a> 
     </div> 
    </div> 
</body> 
</html>

（我加了container div）。它並沒有真正改變任何東西，儘管......只是一個額外的div。你仍然需要所有相同的CSS屬性。

來源

2009-05-03 04:52:33 Bryan

這確實在IE8中心，但我不明白爲什麼我需要它。我有其他使用保證金的網站：0 auto;以包含div爲中心。 – Brettski 2009-05-03 05:00:28

舊的線程，但我想這個答案（也是普遍接受的），因爲這是特別的這個答案，提醒我把文本對齊：中心到身體。 ;-) – 2012-01-17 19:11:51

你可能想將其更改爲以下：

<html> 
<head> 
<title>Welcome</title> 
<style> 
    body { text-align: center; } 
    #pageContainer {width:300px;margin:0 auto;} 
    #toLogo{border:none; } 
</style> 
</head> 
<body> 
    <div id="pageContainer"> 
    <a href="http://portal.thesit.com" id="toSite"><img src="LOGO_DNNsmall.png" id="toLogo"></a> 
    </div> 
</body> 
</html>

的text-align:center;移動到身體。如果您想將其他對齊的左側內容放在div #pageContainer內，那麼您需要該類別的text-align:left;。這是我現在在很多網站中使用的解決方案，似乎適用於所有瀏覽器（這是Dreamweaver在其入門模板中使用的）。

來源

2009-05-03 04:56:50

基督知道爲什麼有人投票給你，因爲這正是你如何集中頁面 – wheresrhys 2009-05-03 12:05:56

因爲IE8實際上是在這個級別的標準兼容，你確實可以應用規範和標準。正如DIV所示，text-align屬性僅以內聯級別元素爲中心，而不是塊級別eleements。文本對齊：中心;在這種情況下，只會將* text *放在正文中，而不是容器元素。正如上面的答案所述，他需要的唯一東西就是文檔類型。 – 2009-05-03 14:02:02

div邊上的邊距auto將它留給瀏覽器來決定它的位置。沒有任何東西告訴瀏覽器div應該在主體中居中，或左右對齊。所以這取決於瀏覽器。如果您向身體添加指令，您的問題將得到解決。

<html> 
    <head> 
    <title>Welcome</title> 
    <style> 
     body { text-align: center;} 
     #pageContainer {width:300px; margin:0px auto; 
      text-align:center; border:thin 1px solid;} 
     #toLogo{border:none; } 
    </style> 
    </head> 
    <body> 
    <div id="pageContainer"> 
     <a href="http://portal.thesit.com" id="toSite"> 
     <img src="LOGO_DNNsmall.png" id="toLogo"> 
     </a> 
    </div> 
    </body> 
</html>

我在div上添加了一個1px邊框，以便您可以更清楚地看到發生了什麼。

由於它處於怪癖模式，因此您將它留給瀏覽器。要刪除怪癖模式，DOCTYPE定義添加到頂部，像這樣：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
    <head> 
    <title>Welcome</title> 
    <style> 
     #pageContainer {width:300px; margin:0px auto; 
      text-align:center; border:thin 1px solid;} 
     #toLogo{border:none; } 
    </style> 
    </head> 
    <body> 
    <div id="pageContainer"> 
     <a href="http://portal.thesit.com" id="toSite"> 
     <img src="LOGO_DNNsmall.png" id="toLogo"> 
     </a> 
    </div> 
    </body> 
</html>

現在，你就可以在頁面上看到您的300像素DIV中心。

來源

2009-05-03 05:02:24

有關的圖紙USERS 這驅使我堅果，直到我發現這個職位：problem with ie8 and blueprint 長話短說，在你的HTML代碼變化

<!--[if IE]> 
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" /> 
<![endif]-->

爲

<!--[if lt IE 8]> 
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" /> 
<![endif]-->

問候亞歷

來源

2009-09-11 23:24:26

-1

這對我的作品上IE6,7,8，FF 3.6.3：

#container 
    { 
     width:100%; 
    } 

    #centered 
    { 
     width:350px; 
     margin:0 auto; 
    }

和

<div id="container"> 
     <div id="centered">content</div> 
    </div>

來源

2010-04-06 16:16:19 ben

爲什麼div/img不在IE8中心？

回答

相關問題