가변 크기의 이미지를 센터링하는 방법

이것은 매우 쉬워야하며 이에 대한 연구를 수행했습니다. here, here, here 및 다른 곳에 코드를 연결했는데 작동하지 않습니다.가변 크기의 이미지를 센터링하는 방법

나는 위에 3 개의 .png가 쌓여있는 웹 페이지가 있습니다. 상위 2 가지는 가변 크기이며 페이지의 100 %입니다. 맨 위에는 구멍이 있고 (중간에는 투명 함), 자바 스크립트를 사용하여 맨 아래를 드러내는 가운데 사라집니다. 상위 2 개의 .png과 자바 스크립트가 완벽하게 작동합니다.

하단 이미지를 수직, 수평 중심으로 정확하게 표시하고 페이지 크기에 비례하도록하고 싶습니다. 나는 그것을 중심으로 만들 수도 있고 비례 적으로 만들 수도 있지만 둘 다 가질 수는 없다. 나는 배경을 바닥에 놓을 수 없다. 왜냐하면 배경이 바른 색이 아니거나 바둑판 식으로 배열 되었기 때문이다. 여기

코드의 일부 샘플입니다

HTML :

<body> 
     <div > 
    <p0 id="face" ><img src="face2.png"; class='face'> </p0> 
</div> 
     <p1 id="circuit" > <img src= 'circuit.png' width = '100%' height = '100%' /> </p1> 
     <p2 id="hole" ><img src="hole.png" width='100%' height = '100%' /> </p2> 
</body>

CSS :

p0{ 
width: 50%;/*I can't set the height to 50% because it is a different size than the width*/ 
center 
z-index:1; 
position: absolute; 
} 

p1{ 
z-index: 2; 
width: 100%; 
padding:0; 
margin: 0; 
height:100%; 
position: absolute; 
} 

p2{ 
z-index:3; 
width: 100%; 
padding:0; 
margin: 0; 
height:100%; 
position: absolute; 
}

출처

2012-06-24 Muricula

지금까지 가지고있는 데모에 대한 링크는 질문에 대한 답을 도울 수 있습니다. – Marcel

작업 데모 링크로 답변을 편집했습니다. –

는 사업부에 중심 원하는 모든 것을 넣어 그 다음과 같습니다 :

여기

.div{ 
    width: 100%; 
    position: relative; // or absolute 
    text-align: center; 
    text-align: -moz-center; 
    text-align: -webkit-center; 
    }

0 링크 여기 jsfiddle

것은 전체 CSS입니다 : 두 이미지가 언급 된 문제로 서로 상단에 정확한 중심에 서로 다른 크기이며,

.parent{ 
width: 100%; 
position: absolute; 
text-aligh: -align: center; 
text-align: -moz-center; 
text-align: -webkit-center; 

} 

.center1{ 

height:120px; 
width: 275px;  
background-image: url("http://www.google.com/images/srpr/logo3w.png"); 
} 

.center2{  
height: 100px; 
width: 200px; 
background-image: url("http://www.google.com/logos/2012/turing-doodle-static.jpg"); 
}

HTML :

 <div class="parent" style="z-index: 1;"> 
     <div class="center1"></div> 
    </div> 
    <div class="parent" style="z-index: 10;"> 
     <div class="center2"></div> 
    </div>

출처

2012-06-24 21:39:28

너비 100 %가 중요합니다. 추가하는 것을 잊었습니다. 방금 편집했습니다. –

왜 텍스트 정렬을 여러 번 설정했는지 알지 못합니다. 왜 당신은 접두어 접두사 중심 값을 사용하고 있습니까? – vcsjones

text-align : center는 항상 작동해야하지만 모든 브라우저에서 작동하는지 확인하기 위해 보통 3을 모두 사용합니다. –

가변 크기의 이미지를 센터링하는 방법

답변

관련 문제