2011-02-05 2 views
4

필자는 수직 정렬 파일 더미에 질문을 추가하고 싶지는 않지만, 아직 아무런 해결책도 찾지 못한 채 몇 시간을 보냈습니다. 상황은 다음과 같습니다.유체 용기에 유체 이미지를 수직으로 센터링하십시오.

슬라이드 쇼 갤러리를 구축 중입니다. 나는 사용자의 윈도우가 허용하는만큼 큰 이미지를 표시하기를 원한다. 따라서이 외부 자리 표시 자 :

<section class="photo full"> 

(예, HTML5 요소를 사용하고 있습니다)이 있습니다. 다음 CSS가 있습니다 :

section.photo.full { 
    display:inline-block; 
    width:100%; 
    height:100%; 
    position:absolute; 
    overflow:hidden; 
    text-align:center; 
} 

다음으로 이미지가 그 안에 있습니다. 이미지의 방향에 따라, 나는 자동차에 폭 또는 75 % 높이 및 다른 축 중 하나를 설정합니다

$wide = $bigimage['width'] >= $bigimage['height'] ? true: false; ?> 
<img src="<?= $bigimage['url'] ?>" width="<?= $wide? "75%" : "auto"?>" height="<?= $wide? "auto" : "75%"?>"/> 

그래서, 우리는 유체 이미지 내부에 유체 외부 용기가있다. 이미지의 수평 가운데 맞춤이 작동하지만 이미지를 컨테이너 내부에 수직으로 가운데 놓을 수있는 방법을 찾지 못하는 것 같습니다. 센터링 방법을 연구했지만 대부분 컨테이너 또는 이미지가 알려진 너비 또는 높이를가집니다. 그럼 거기에 디스플레이가 있습니다 : 표 셀 방법, 어느 쪽이든 나를 위해 작동하지 않는 것.

막혔습니다. CSS 솔루션을 찾고 있지만 js 솔루션에도 열려 있습니다. 이것은 잘 밖으로 작동

div { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 

Running example.

+0

@Ferdy는 제 요소 BODY의 직접적인 아이인가? –

+0

@Ferdy 또한 IMG 요소에 대한 결과 HTML 코드 샘플을 게시하십시오. –

+0

@Sime : 예. 여기에 임시 데모 페이지가 있습니다 : http://ferdy.dnsalias.com/apps/jungledragon/html/tag/92/slideshow/recent/10 – Ferdy

답변

8

:

section.photo.full { 
    display: table; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    overflow: hidden; 
    text-align: center; 
} 

section.photo.full a { 
    outline: 0; 
    display: table-cell; 
    vertical-align: middle; 
} 

section.photo.full img { 
    margin-top: 0; 
} 

I 디스플레이 테이블을 추측하고있어

+0

당신은 그 사람입니다! 그것은 실제로 작동합니다. IE8의 이미지를 단지 1 픽셀 높이로 표시하는이 다른 문제가 여전히 있지만 또 다른 도전 과제가 있습니다. – Ferdy

+0

그건 그렇고, 나는 두 가지 부작용이 수정을 참고 : 1. href는 75 % 대신 전체 창 너비에 걸쳐있는 것으로 보인다.이미지 옆에 마우스를 올려 놓으면 커서가 포인터를 나타냅니다. 2. 창을 많이 확대하면 세로 스크롤 막대가 나타납니다. 오버플 로인 것 같습니다 : ( – Ferdy

+0

) 추가 div를 적용하고자한다면 문제가 사라질 수 있습니다 : section.photo.full> extradiv> a> img 그런 다음 테이블 셀을 extradiv – Duopixel

1

아마이 (div이 이미지 감싸 사업부이다) 당신을 위해 작동 -cell은 부모 컨테이너가 테이블로 표시되지 않았기 때문에 당신을 위해 일하지 않았습니다. 여기

는 jsfiddle의 데모입니다 :

http://jsfiddle.net/duopixel/5wzPS/

+0

OP는 컨테이너가 유체라고 말했다. –

+0

실제로, 부모 컨테이너도 유동적이다. – Ferdy

0

가의 테이블 말도 모두를 건너 가자! :)

<div> 
    <img src="https://placehold.it/1000x1000"> 
</div> 

div { 
    position: relative; 
} 

img { 
    position: absolute; 
    width: 70%; 
    top: 50%; 
    left: 50%; 
    transform: translate3d(-50%,-50%,0); 
} 

예 : https://jsfiddle.net/te29m9fv/1/