Dikey hizalamak için ya display: table ya da display: flex kullanılır. Aşağıda flex olanı anlattım. Hem daha basit ve efektif, hem de daha fazla tarayıcı desteği var.
Öncelikle parent div'e display: flex; diyoruz. Daha sonra içerisindeki elemana margin: auto; kodunu vererek hem dikey hem de yatay ortalamış oluyoruz. Yani kodlarınız aşağıdaki gibi olmalı.
https://jsfiddle.net/895af2zt/20/
Eğer yan yana bulunan 2 elemanın ölçeği birbirlerine göre otomatik şekillensin istiyorsanız, ikisinin ortak bulunduğu bir parent div oluşturup display: flex; kodunu ekleyin. Daha sonra altındaki elemanlar default olarak birbirlerinin uzunluğuna göre şekillenecektir.
img-div'e istediğiniz kadar resim ekleyerek deneyebilirsiniz.
Yardımcı olabileceğim başka bir konu varsa belirtebilirsiniz.