溢出内的垂直对齐图像：隐藏的div

Question

I am trying to align an image vertically within a div with overflow set to hidden so that the container has the same height for each post. I have tried a lot of other solutions, but it is not working with the overflow element. Anybody? This is my CSS code so far:

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

and the HTML:

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

Thanks in advance!

Answer 1

As vertical alignment has always been a pain in legacy HTML and stuff I suggest you give the div:

position: relative;

And give the img:

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

That should do it..

Answer 2

Have you tried using the vertical-align CSS property?

Give this a try:

.featured-image-blog img{
  height: auto;    
  width: 600px;
  vertical-align: middle;
}

It should align it to the middle of the parent container.

Read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align