왜 이 div/img 지 센터에서 IE8?

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

  •  03-07-2019
  •  | 
  •  

문제

나는 아주 간단한 페이지를 들고 나는 내장을 중심으로 div,앵커 및 이미지입니다.몇 가지 이유로 그것이지 센터에서 IE8(모드),및 나고 쉽게 확인할 수 있게 되었습니다 왜.나지 않을 시도 할 수있는 기회를 가지고 그것에 다른 IE 브라우저입니다.내가 이것을 시도하고 크롬과 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

도움이 되었습니까?

해결책

당신이 정말로 원하는 페이지에서 작동하는 쿼크 모드?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>

DIV에 1px 테두리를 추가하여 더 명확하게 무슨 일이 일어나고 있는지 확인할 수있었습니다.

퀴크스 모드이기 때문에 브라우저까지 남겨두고 있습니다. 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>

이제 페이지에서 300 PX DIV 센터를 볼 수 있습니다.

추가하다 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