Выровнять картинки в колонке

[WhatIsHTML]

Уже перебробовал много методов и сам сидел мучился, но так ничего и не получается. В примере из-за того, что картинки разные по размеру, колонки получаются разные по высоте. Сделать колонки одинаковой высоты вроде как и не проблема. Проблема в том, что не знаю как выровнять по вертикали картинки, чтобы отступы сверху и снизу между ними были одинаковые в одной колонке. Может решение совсем простое?

https://jsfiddle.net/4p05m9cj/

P.S. Добавил внизу футер и желтый фон для наглядности.

https://jsfiddle.net/4p05m9cj/2/

[by chris]

Если правильно понял

https://jsfiddle.net/4p05m9cj/3/

[WhatIsHTML]

Ах этот флекс, пытался ним сделать, но не осилил. Спасибо

[by chris]

Ах этот флекс, пытался ним сделать, но не осилил. Спасибо

 

Я советов не даю, но могу подсказать, есть такой сервис хабр...

http://flexboxfroggy.com/

[WhatIsHTML]

Классная штука)

[Launder]

@by chris, 24 пример - кубик-рубик :-)

@WhatIsHTML, вот эта статья помогает понять, откуда растут ноги =)

Edited March 14, 2016 by Launder