필자는 수직 정렬 파일 더미에 질문을 추가하고 싶지는 않지만, 아직 아무런 해결책도 찾지 못한 채 몇 시간을 보냈습니다. 상황은 다음과 같습니다.유체 용기에 유체 이미지를 수직으로 센터링하십시오.
슬라이드 쇼 갤러리를 구축 중입니다. 나는 사용자의 윈도우가 허용하는만큼 큰 이미지를 표시하기를 원한다. 따라서이 외부 자리 표시 자 :
<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;
}
@Ferdy는 제 요소 BODY의 직접적인 아이인가? –
@Ferdy 또한 IMG 요소에 대한 결과 HTML 코드 샘플을 게시하십시오. –
@Sime : 예. 여기에 임시 데모 페이지가 있습니다 : http://ferdy.dnsalias.com/apps/jungledragon/html/tag/92/slideshow/recent/10 – Ferdy