Вертикально центрирующее изображение в элементе фигуры flexbox

Question

В настоящее время я делаю редизайн секции портфолио для сайта, и идея состоит в том, чтобы иметь репрезентативное изображение для каждого клиента, который служит фоном блока ссылок, и когда вы мышь над изображением, полупрозрачный оверлей с кратким сводкой текста облегчает. Этот блок можно щелкнуть, чтобы перейти к отдельной странице, которая описывает клиента и его работу более подробно. Секция портфолио представлена ​​гибким дисплеем для удобства реагирования.

Вот сокращенный вариант того, что у меня есть: 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

Это повторение вопрос, но увидеть следующее:

Flexbox: center horizontally and vertically

Для Flexbox, у вас есть различные элементы CSS, такие align-items и justify-content

, что вы будете использовать для достижения своей цели.

Answer 3

Вы можете добавить свойство высоту строки на рисунке, так как вы уже установили высоту элемента. Поэтому вы добавляете это в свой рисунок CSS {line-height: 240px}. Надеюсь это поможет.