垂直居中img圖內的鏈接，用css

Question

所以我試圖自定義一個滑塊，出現在我的WordPress主題與CSS。現在，它並排顯示三個後期縮略圖。不幸的是，我的特色圖像都有不同的長寬比，所以我試圖創建一種信箱效果，通過給包含圖像的div一個固定的大小（202像素×138像素）和一個黑色背景，然後使圖像居中div。

這是我希望它看起來像：

現在，我的所有圖像都與他們的容器的頂部對齊，所以它看起來像最短/最胖的圖像只是有一個在底部的黑色酒吧。

這是它看起來像現在：

我是如此接近。我已經閱讀了垂直對齊（我已經看到「如何不垂直居中內容」博客帖子[我不能鏈接到因爲我的可怕聲譽]，這是有用的和內容豐富，但沒有解決我的問題），但在這一點上，我只是卡住了。

我的HTML看起來像這樣：

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

     //and then some other stuff// 

    </li> 
</ul> 

然後還有的CSS！我的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; 
}