Example Fiddle

Question

我目前正在重新设计一个网站的投资组合部分，其目的是为每个客户端提供一个代表性图像作为链接块的背景，当您将鼠标悬停在图像上时， -transparent overlay，其中包含一些简短的文本摘要。可以单击此块以将用户带到描述客户端及其工作的单个页面。投资组合部分采用弹性框显示，便于响应。

这是我所得到的精简版：https://jsfiddle.net/ddw2m9ea/

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: Open Sans;
}
.row {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
figure {
    overflow: hidden;
    flex: 1 0 0px;
    position: relative;
    margin: 0;
    height:240px;
}
figure > img {
    width:100%;
}
a > img {
    max-width: 100%;
    vertical-align: middle;
}

我尝试将vertical-align: middle;应用于一些没有效果的东西，目前你看到图像继续越来越向下流出容器，因为它越来越大。我需要一种能够在不改变尺寸的情况下垂直居中图像的解决方案。

Answer 1

vertical-align: middle如果您将某些内容设置为display: inline-block;但不是任何块级元素，则可以正常工作。垂直对齐只会影响文本流中的项目（将inline-block放置的内容将完成）。

但是，您可以这样做：

figure > img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

由于您已将figure设置为position上的relative，因此您的图片始终会保留在figure的中心位置。

Example Fiddle

Answer 2

您可以在 figure 上添加行高属性，因为您已经设置了元素的高度。所以你把它添加到CSS图中{line-height：240px}。希望这会有所帮助。

在flexbox图元素中垂直居中图像

2 个答案:

Example Fiddle