DIV 센터는 IE

내가이 CSS를 크롬에DIV 센터는 IE

position:relative; 
margin: 0 auto; 
top:50%; 
width:15px; 
height:15px; 
background-color:#fff; 
-moz-border-radius: 15px; 
-webkit-border-radius: 15px; 
cursor:pointer;

그것의 중심 벌금을 가지고 IE와 FF를위한 상단에 남아 작동하지 않습니다.

제거 및 위치 변경 :

여기에 무슨 문제가 있습니까?

감사 장

출처

2010-05-31 X10nD

HTML 모양은 어떻습니까? text-align : center를 부모 요소에 추가 했습니까? – baloo

상위를 고려하십시오 – X10nD

#div { 
    position:relative; 
    margin-left:-7.5px; // Half your width in negative 
    margin-top:-7.5px; // Half your height in negative 
    top:50%; 
    left:50%; 
    width:15px; 
    height:15px; 
    background-color:#fff; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    cursor:pointer; 
}

이 모든 브라우저에서 작동합니다. IE 렌더링은 유효한 코드로 끔찍할 수 있지만 보편적 인 작동을 위해이 방법을 시도하고 테스트 한 방법입니다.

이것을 편집하려면 단순히 div 요소의 높이 또는 너비의 절반에 맞게 음수 여백 값을 변경하십시오.

출처

2010-05-31 09:26:05 duckbox

div가 페이지의 중앙에 있어야합니다. – X10nD

이 코드는 IE6 - 8 및 다른 브라우저에서 제공되는 크기를 가운데에 표시합니다. – duckbox

margin: 0 auto;은 IE6 +에서는 정상적으로 작동하지만 표준 모드 인 경우에만 정상적으로 작동합니다. HTML에 include a Standards Mode doctype을 입력하십시오. 그렇지 않으면 아무 것도 올바르게 작동하지 않는 Quirks 모드가됩니다.

특정 페이지가 표준 모드인지 확인하려면 주소 표시 줄에 javascript:alert(document.compatMode)을 입력하십시오. CSS1Compat 좋다; BackCompat은 Quirks입니다.

절대 위치 지정이없는 수직 중심 지정의 경우, top: 50%은 부모 요소가 명시적인 높이를 갖는 경우에만 의미가 있습니다. 따라서 브라우저 높이의 반으로 화면을 아래로 밀어 넣으려는 경우 요소의 각 조상에 100% 높이를 지정해야합니다 (예 :). 적어도 :

html, body { height: 100%; }

출처

2010-05-31 10:49:34 bobince

봅니다 margin-top: 30%; 대신 어떤 position:relative;이 필요하지 top:50%;
를 사용합니다.

IE에서 정렬 센터 EDIT
, 나는 도움을 사업부 - 래퍼를 사용합니다.
이것은 모두 내 코드입니다.

<html> 
    <head> 
     <style type='text/css'> 
      #myDivWrapper { 
       text-align: center; /* x axis for ie*/ 
      } 
      #myDiv { 
       /* set position */ 
       margin: 0 auto; /* x axis */ 
       margin-top: 30%; /* y axis */ 

       /* draw div */ 
       background-color: red; 
       width: 200px; 
       height: 200px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id='myDivWrapper'> 
      <div id='myDiv'></div> 
     </div> 
    </body> 
</html>

출처

2010-11-27 07:42:23 diewland

DIV 센터는 IE

답변

관련 문제