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

Question

我目前正在重新设计一个网站的投资组合部分，我的想法是为每个客户提供一个具有代表性的图像作为 link 块的背景，当您将鼠标放在在图像上，一个带有一些简短文本摘要的半透明覆盖层缓和了进来。可以单击此块将用户带到一个单独的页面，该页面更详细地描述了客户及其工作。投资组合部分采用弹性框显示，以便于响应。

这是我得到的内容的删节版：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

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

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

Vertically centering image in flexbox figure element

html

css

figure

centering

flexbox

Example Fiddle