Почему этот div / img не будет центрироваться в IE8?

StackOverflow https://stackoverflow.com/questions/816343

  •  03-07-2019
  •  | 
  •  

Вопрос

У меня есть очень простая удерживающая страница, которую я создал, центрируя 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>

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

Спасибо,

Бретт

Это было полезно?

Решение

Вы действительно хотите, чтобы ваша страница работала в режиме quirks?Ваш 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>

Другие советы

Запас прочности на 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, чтобы вы могли более четко видеть, что происходит.

Вы оставляете это на усмотрение браузера, потому что он находится в режиме quirks.Чтобы удалить режим quirks, добавьте определение 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>

Теперь вы сможете увидеть свой div-центр размером 300 пикселей на странице.

Добавить 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-свойства.

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

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

ДЛЯ ПОЛЬЗОВАТЕЛЕЙ BLUEPRINT Это сводило меня с ума, пока я не нашел этот пост: проблема с ie8 и 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]-->

С уважением Алекс

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top