IE8, FF3 <img> 센터 정렬 문제

IE 및 Firefox에서 이미지가 가운데 맞춤되지 않는 이상한 버그가 발생했습니다. 페이지가 이미지 센터를로드하는 동안 페이지가로드 될 때 신비하게 왼쪽으로 이동합니다. 나는 CSS로 설정 다음 한 :IE8, FF3 <img> 센터 정렬 문제

#image{ 
display: block; 
margin-left: auto; 
margin-right: auto;}

그리고 HTML 마크 업 :

<img id="image" src="example.png" width="158" height="167" alt="Example">

참고 크롬과 사파리에서 나는이 버그가 발생하지 오전을.

업데이트 : 이미지가, 부모가 min-width: 850px 및 width: 100% 속성이 컨테이너 클래스에 저장하지 않습니다. 이 이미지의 맨 오른쪽에 이미지가 있지만 절대적으로 위치합니다. 이미지 바로 위에 머리글 요소가 있지만 margin-bottom이 0으로 설정됩니다.

업데이트는 :

#header { 

       padding: 5px; 
       height: 20px; 
       margin-top: 0px; 
       width: 100%; 
       background: #333333; 
      }

출처

2012-04-27 GoofyBall

다른 요인이있을 수 있습니다. 컨텍스트를 더 제공 할 수 있습니까? – Kevin

물론입니다. 내 대답에 더 많은 맥락을 제공 할 것입니다. – GoofyBall

여백 : 0 자동; – Dips

내가 여기에 코드를 시뮬레이션하려고 다음 CSS를 가지고 문제를 일으키는 헤더가있다. 이미지가 중앙에 정렬됩니다. 난 아무것도 놓칠 경우

http://jsfiddle.net/fSueu/

당신은 나에게 더 자세한 정보를 줄 수 있을까요?

출처

2012-04-27 01:57:51 seanbun

이것은 이론적으로 어떻게 표시해야하는지입니다. 그러나 많은 다른 요소가 있기 때문에 문제를 격리하기가 힘듭니다. 페이지의 머리글 위에 이미지를 배치하면 이미지가 가운데에 배치됩니다. 아마도 그것이 문제입니다. – GoofyBall

코드를 업데이트했습니다. 이제 내가 헤더를 삽입 할 때 그것은 중심에서 벗어납니다! 이게 문제 야! 바라기를, 해결책은 저희에게 더 명확하게된다. – GoofyBall

코드를 찾을 수 없습니다. 당신의 코드가 이렇게됩니까? http://jsfiddle.net/fSueu/7/ 코드 수정 후 상단의 "업데이트"버튼을 클릭하십시오. – seanbun

#header { 
    text-align: center; 
      padding: 5px; 
      height: 20px; 
      margin-top: 0px; 
      width: 100%; 
      background: #333333; 
     }

센터에서 텍스트를 가운데 맞춤하면 이미지가 IE에서 가운데 맞춤됩니다.

출처

2012-04-27 02:31:40 Scott

안녕 당신은

<div class="wraptocenter due"> 
<span></span> 
<img width="101" height="101" alt="" src="http://images2.fanpop.com/images/photos/5200000/Animated-mermaid-images-mermaids-5260155-313-313.gif"> 
</div>

CSS는

.wraptocenter { 
    background:red; 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    width:300px; 
    height:300px; 
}

라이브 데모이

HTML 등을 쉽게 할 수 http://jsfiddle.net/zPQ9M/

더 정보 접촉 센터 http://www.brunildo.org/test/img_center.html

출처

2012-04-27 08:30:06

IE8, FF3 <img> 센터 정렬 문제

답변

관련 문제