Выровнять содержимое ссылки по вертикали

[Temiks]

Здравствуйте. Как можно выровнять содержимое ссылки по вертикали?

Задача сделать вот это:

 

Есть изображение, если навести на изображение появляется ссылка с текстом, текст находится по центру, а ссылка расстягивается на всю ширину и высоту изображения.
Изображения могут быть разной высоты, по этому padding думаю не подойдет :/ 
--
как такое можно сделать? 

[Нарек]

https://jsfiddle.net/Narek_T/srojy7oc/

[Temiks]

https://jsfiddle.net/Narek_T/srojy7oc/

Спасибо большое!!! У меня получилась лабуда с использованием display: table, table-cell .. куча г*** в общем

[parliament]

https://jsfiddle.net/Narek_T/srojy7oc/

Блин классный код

[Igor Schnaider]

Одно замечание: здесь нужен text-align, а не justify-content :-)

[Нарек]

Одно замечание: здесь нужен text-align, а не justify-content :-)

Уверен? 

[Igor Schnaider]

 

Одно замечание: здесь нужен text-align, а не justify-content :-)

Уверен? 

 

 

Ну да :-)

 

justify-content выравнивает не текст, а сам флекс элемент. Текст по-прежнему выровнен слева.

 

Просто флекс элемент по умолчанию занимает ширину своего контента. Поэтому здесь все нормально, он меньше своего родителя. А вот так видно.

[TuTaHuKk]

Но и с text-align: center он не выравнивает текст по центру .

https://jsfiddle.net/srojy7oc/3/

Edited February 7, 2016 by TuTaHuKk

[Igor Schnaider]

Выравнивает.

 

http://codepen.io/anon/pen/XXxOxz

 

Кстати, я ошибся, тут все-таки нужен и justify-content. Здесь создается анонимный флекс элемент, но он flex-level box, а не block-level box, поэтому text-align не сработает, если он не на всю ширину.

В общем, тут нужно оба правила прописывать.