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%);

应该这样做..

Answer 2

您是否尝试过使用vertical-align CSS媒体资源？

尝试一下：

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

它应该将它与父容器的中间对齐。

在此处阅读更多内容：https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

overflow：hidden div中的垂直对齐图像

2 个答案: