html - 溢出 :hidden div 内的垂直对齐图像

Question

我试图在 div 中垂直对齐图像，并将溢出设置为隐藏，以便每个帖子的容器具有相同的高度。我尝试了很多其他解决方案，但它不适用于溢出元素。有人吗？到目前为止，这是我的 CSS 代码:

.featured-image-blog{
  height: 220px;
  width: 600px;
  overflow: hidden;
}
.featured-image-blog img{
  height: auto;    
  width: 600px;
}

和 HTML:

<div class="featured-image-blog">
    <?php the_post_thumbnail('featured-image'); ?>
</div>

提前致谢!

Answer 1

由于垂直对齐一直是遗留 HTML 和内容中的一个难题，我建议您给 div:

position: relative;

并给出 img:

position: absolute;
top: 50%;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);

应该可以了..