Почему этот div / img не будет в центре IE8? - PullRequest
Новая
       11

Почему этот div / img не будет в центре IE8?

33 голосов
/ 03 мая 2009

У меня есть очень простая удерживающая страница, которую я построил, центрируя div, якорь и изображение. По некоторым причинам он не будет центрироваться в IE8 (в любом режиме), и я надеюсь, что кто-то может сказать мне, почему. У меня не было возможности попробовать это в других браузерах IE. Я пробовал это в Chrome и FF3, где он работает нормально. 

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

Я сказал, что это действительно просто. :)

Спасибо,

Brett

Ответы [ 6 ]

70 голосов
/ 03 мая 2009

Вы действительно хотите, чтобы ваша страница работала в режиме причуд? Ваш 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>
3 голосов
/ 03 мая 2009

Поле auto по бокам div оставляет браузеру решение, куда он идет. Нет ничего, что говорит браузеру, что 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>

Я добавил границу размером 1 пиксель в div, чтобы вы могли видеть более четко происходящее.

Вы оставляете это на усмотрение браузера, потому что он находится в режиме причуд. Чтобы удалить режим причуд, добавьте определение типа документа сверху, например так: 

<!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 пикселей на странице.

2 голосов
/ 03 мая 2009

Добавьте text-align:center к телу. Это должно быть сделано в сочетании с margin:0 auto на div.

Вы можете центрировать без использования 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.

0 голосов
/ 06 апреля 2010

Это работает для меня на 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>

0 голосов
/ 12 сентября 2009

для пользователей BLUEPRINT Это сводило меня с ума, пока я не нашел этот пост: проблема с ie8 и план Короче говоря, в вас 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]-->

С уважением Alex

0 голосов
/ 03 мая 2009

Возможно, вы захотите изменить его на следующее: 

<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 использует в своих начальных шаблонах).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...