css와 함께 그림 안에있는 링크 안에 img를 세로로 가운데에 배치

Question

그래서 CSS로 WordPress 테마에 포함 된 슬라이더를 사용자 정의하려고합니다. 지금은 세 개의 미리보기 이미지를 나란히 표시합니다. 안타깝게도 내 추천 이미지는 모두 가로 세로 비율이 다르기 때문에 고정 크기 (202x138 픽셀) 및 검정색 배경을 포함하는 div를 제공하고 나서 이미지를 가운데에 배치하여 일종의 레터 박스 효과를 만들려고합니다. div. 이 짧은/뚱보 이미지가 단지를 가지고처럼 보이는, 그래서 내 모든 이미지가 컨테이너의 상단과 정렬, 지금

:

이

내가 그것을 같이 할 것입니다 하단에 검은 색 막대. 이는 지금 모습입니다

:

나는 너무 가까이입니다. 나는 수직 정렬에 대해 읽었습니다. (나는 이미 "수직적으로 내용을 중심에 두지 않는"블로그 게시물을 보았습니다. [저의 지독한 평판 때문에 링크 할 수 없습니다] 유용하고 유익하지만 그렇지 못했습니다. 내 문제를 해결),하지만이 시점에서 나는 단지 붙어있다.

<ul class="slider"> 
    <li> 
     <figure class="slide-image"> 
      <a href="blogposturl"> 
       <img src="blogimage" /> 
      </a> 
     </figure> 

     //and then some other stuff// 

    </li> 
</ul> 

을 그리고 다음 CSS있다 :

내 HTML은 다음과 같은 형태! 내 CSS 지금이 바로 다음과 같습니다

.slider { 
    position: relative; 
} 

.slider li { 
    position: absolute; 
} 

figure.slide-image { 
    border-radius: 0px; 
    width: 202px; 
    height: 138px; 
    position: absolute; 
    background-color: #000; 
} 

.slide-image img { 
    border-radius: 0px; 
    position: absolute; 
    left: 0; 
    max-width: 202px; 
    top: 50%; 
    margin-top: -69px; 
} 

내가 기본적으로 phrogz의 지시를 따랐다. 그럼에도 불구하고 내 이미지는 컨테이너 상단에 행복하게 앉아 있습니다. 문제는 이미지가 링크 태그 안에 있다고 생각합니까? 아니면 컨테이너와 관련이 있을까요? 나는 모른다. 누구든지 나를 도울 수 있습니까?

Answer 1

img에서 절대 위치 지정 중 일부를 제거했습니다. 대신이 방법을 사용해보십시오.

수직 센터링에 display:table-cell 및 vertical-align:middle을 사용합니다.

Working example here - 알다시피 다양한 높이에서 작동합니다. 나는 어떤 HTML도 바꾸지 않았다.

figure.slide-image a { 
    display: table-cell; 
    vertical-align: middle; 
    height: 138px; 
} 
.slide-image img { 
    border-radius: 0px; 
    max-width: 202px; 
    vertical-align: middle; 
}