div 내에서 이미지와 앵커를 수직으로 정렬

Question

나는 이것을 위해 많은 방법을 시도했지만 그럴 수 없습니다. 3 년 후 프런트 엔드 작업을하기보다는 당황스럽게 생각합니다.하지만 더 이상 시간을 낭비하지 않아도됩니다.

저는 워드 프레스 이미지 갤러리가 있습니다. 이미지를 세로로 가운데에 맞춰야합니다. 높이, 선 높이 및 세로 정렬을 설정하려고 시도했습니다. 중간 - 그러나 기쁨은 없습니다.

이미지는 사용자가 추가하므로 크기와 총 수가 고정되지 않으므로 개별 요소 높이를 구체적으로 타겟팅하는 솔루션은 적합하지 않습니다.

의 URL : http://www.europa-international.net/

<dl class="gallery-item "> 
<dt class="gallery-icon"> 
    <a href="http://www.europa-international.net/our-videos/snapshot-1-02-01-2014-15-33/" title="Snapshot 1 (02-01-2014 15-33)"><img width="125" height="70" src="http://www.europa-international.net/wp-content/uploads/2013/07/Snapshot-1-02-01-2014-15-33.png" class="attachment-homepage-gallery" alt="Latest Promo Videos"></a> 
</dt> 
<dd class="wp-caption-text gallery-caption">Latest Promo Videos</dd> 

#gallery-1 .gallery-icon { 
    height: 104px; 
    line-height: 104px; 
} 
#gallery-1 .gallery-icon a { 
    vertical-align: middle; 
} 

많은 변형 (앵커 높이/라인 높이주는 : 104px 디스플레이 : 블록, 수직 ​​정렬 : 중간)에 논의 이 장소.

편집 : 여기에 바이올린 게시 : http://jsfiddle.net/DE4ph/2/

도 - 중복 응답 솔루션은 내가 캔트으로 (쉽게)의 워드 프레스에 의해 생성 된 마크 업을 변경 적합하지 않습니다. 상대, 다음 스타일 앵커에 추가 :

위치 : 많은 중

Answer 1

하나의 옵션 위치에 컨테이너를 DIV을 설정하는 것입니다 절대; 디스플레이 : 인라인 블록; 왼쪽 : 50 %; 상단 : 50 픽셀; margin-left : -62.5px; margin-top : -35px; HTML에 방법을하지 않는 것이 좋습니다 내가 무엇을 알고부터 -

BTW

#gallery-1 .gallery-icon { 
    height: 104px; 
} 
#gallery-1 .gallery-icon a { 
    line-height: 104px; 
} 

#gallery-1 .gallery-icon a img { 
    vertical-align: middle; 
} 

가 자기의 이미지가 앵커 내부 사업부 내부 경우 :

또 다른 옵션

은 수직 정렬을 사용하고 있습니다 . 대신 이미지의 표시를 차단 또는 인라인 블록으로 변경할 수 있습니다.

Answer 2

상위 컨테이너에 컨테이너 자체와 동일한 값 (예 : 200 픽셀)을 줄 고 이미지의 중간에 세로 맞춤을 설정하면됩니다.

.gallery-icon { 
    height: 200px; 
    line-height: 200px; 
} 
.gallery-icon img { 
    vertical-align:middle; 
} 

은 참조 : http://jsfiddle.net/B78nD/