Why will this div/img not center in IE8?

2019-01-31 18:01发布

站内文章 / HTML/CSS
9 0 0

问题:

I have a very simple holding page I built centering a div, anchor and image. For some reason it will not center in IE8 (either mode), and I am hoping someone can tell me why. I haven't had a chance to try it in other IE browsers. I have tried this in Chrome and FF3 where it works OK.

<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>

I said it was really simple. :)

Thank you,

Brett

回答1:

Do you really want your page to work in quirks mode? Your HTML centers fine once I added doctype to to force standards mode:

<!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>


回答2:

The margin of auto on the sides of the div leave it up to the browser to decide where it goes. There is nothing telling the browser that the div should be centered in the body, or left or right aligned. So it's up to the browser. If you add a directive to the body, your problem will be solved.

<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>

I added a 1px border to the div so that you could see what was happening more clearly.

You're leaving it up to the browser because it's in quirks mode. To remove quirks mode, add a doctype definition to the top, like so:

<!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>

Now you'll be able to see your 300 px div center on the page.



回答3:

Add text-align:center to the body. That should do it when combined with the margin:0 auto on the div.

You can center without using the text-align:center on the body by wrapping the entire page contents in a full-width container & then setting text-align:center on that as well.

<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>

(I added the container div). It doesn't really change anything though... just an extra div. You still need all the same css properties.



回答4:

You probably want to change it to the following:

<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>

The text-align:center; is moved to the body. If you want to place other aligned left content within the div #pageContainer, then you'll need text-align:left; for that class. This is the solution that I have used in quite a few websites now and seems to work across all browsers (it's what Dreamweaver uses in it's starter templates).



回答5:

FOR BLUEPRINT USERS This drove my nuts, until i found this post: problem with ie8 and blueprint Long story short, in you html code change the 

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

for

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

Regards Alex



回答6:

This works for me on IE6,7,8,FF 3.6.3:

    #container
    {
        width:100%;
    }

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

and

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



标签： html css internet-explorer-8
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~