CSS는 모든 브라우저에서 화면의 중심에 이미지를 배치하지만

관련 질문 섹션에서 비슷한 질문을 찾을 수 없으므로 운 좋게 생각합니다.CSS는 모든 브라우저에서 화면의 중심에 이미지를 배치하지만

로드 시간이 눈에 띄게 길어로드 아이콘이 나타날 수있는 페이지를 디자인하고 있습니다. 현재 아이콘로드가 완료 될 때까지 페이지 위에 반투명 오버레이가있는 아이콘이 화면 중앙에 표시되도록 설정했습니다. 여기에 내가 지금이 파이어 폭스와 크롬에서 예상 작품으로

 <style type="text/css"> 
    #overLayBackground{ 
    background-color: rgb(250, 250, 250); 
    opacity: 0.7; /* Safari, Opera */ 
    -moz-opacity:0.25; /* FireFox */ 
    filter: alpha(opacity=70); /* IE */ 
    z-index: 200; 
    height: 100%; 
    width: 100%; 
    background-repeat:repeat; 
    position:fixed; 
    top: 0px; 
    left: 0px; 
    text-align:center; 
     line-height: 240px; 
    } 

    #overLayBackground>img { 
     position:absolute; bottom:0; top:0; left:0; right:0; margin:auto; 
    }

<div id="overLayBackground"> 
    <img src="www.example.com/images/loading.gif" title="Image" alt="The image" /> 
</div>

을 사용하고있는 코드는하지만, IE는 왼쪽 상단 모서리에 표시하는 아이콘이 있습니다. 다른 브라우저처럼 동작하고 화면 중앙에 배치 할 수있는 방법이 있습니까? 사전에

감사합니다.

출처

2010-01-14 canadiancreed

그리고 이것은 IE에 대해 무엇을 말해 줍니까? – Rob

해결책을 찾았습니다. #overLayBackground> img 줄을 position : absolute로 변경하면 상위 : 50 %; 왼쪽 : 50 %; 그것은 이미지를 수직 및 수평으로 센터링하는 IE와 FF 모두에서 작동합니다. 응답 한 모든 사람들에게 감사드립니다.

출처

2010-03-25 19:53:23 canadiancreed

이것은 문제를 해결하지 못하는 것 같습니다. 완벽한 솔루션을 게시 할 수 있습니까? – Stavros

센터링에 margin : auto를 사용하는 경우 img에 절대 위치 지정을 사용하면 안됩니다.

편집 : op 설명에 대한 응답으로. 여백 : 자동은 수평 중심 맞춤에서만 작동하며 여백 작동 방식을 정의한 것입니다. 세로 센터링의 경우, top : 50 %를 사용하고 음의 상단 여백을 사용하여 과거에는 다른 기법을 사용했습니다.

http://www.alistapart.com/articles/holygrail/

여기에 더 alistapart 선량 :

나는이 alistapart 기사를 추천

http://www.alistapart.com/articles/practicalcss/ 당신이 (문서 타입을 지정하고 구문 오류를 수정하면 귀하의 코드가 IE8에서 작동

출처

2010-01-14 19:25:56 Yoni

답장을 보내 주셔서 감사합니다. 다음 결과를 사용하여 다음 구성을 시도해 보았습니다. 위치 : 상대적, 여백 없음 : 자동 - IE와 FF 둘 다 가로로 가운데에 맞춰졌지만 이미지는 세로로 가운데에 정렬되지 않고 화면의 맨 위에 있습니다. 위치 설정 없음, 여백 : 자동 - 동일한 것. 위치 : 상대적, 여백 : 자동 - 동일한 것. 위치 : 절대, 여백 없음 : 자동 - IE와 FF 둘 다 왼쪽 상단에 이미지가 있습니다. – canadiancreed

div 스타일 태그 안쪽).

이 여가 시간을 용도를 자유롭게 ... NGEN Preload Screen

보기하여 body.onload 행동에 대한 소스 .. :

출처

2010-01-14 19:26:50

답장을 보내 주셔서 감사 드리며 스타일 내에서 div를 잡아 주셔서 감사합니다. 페이지 상단의 doctype은 다음과 같습니다. 이 Doctype으로 작업하려고 할 수 있습니까? (어째서 안되는지는 모르지만 결코 알지 못함) – canadiancreed

질문의 코드와 doctype을 사용하면 효과가있었습니다. – Stavros

여기 내 사용자 정의 클라우드 응용 프로그램 중 하나를 사용했습니다 사용자 정의 하나

출처

2010-01-14 19:27:37 DoctorLouie

CSS는 모든 브라우저에서 화면의 중심에 이미지를 배치하지만

답변

관련 문제