Como alinhar as imagens em uma linha todas alinhadas verticalmente no meio, não importando a altura e a largura do fluido?

Question

Jul 31, 2013, 07:24 PM

Como alinhar as imagens em uma linha todas alinhadas verticalmente no meio, não importando a altura e a largura do fluido?

Eu estou tentando criar algumas imagens fluidas que estão alinhadas lado a lado, mas também devem ser alinhadas verticalmente no meio, não importa o que as dimensões de altura são, eu defini as imagens para ter uma largura máxima: 100% para que eles fiquem dentro de seus pais max-width para que eu possa reduzir estes em tamanho em larguras de tela menores. Meu problema, porém, é que eu não tenho certeza da melhor maneira de alinhar verticalmente essas imagens, alguém pode aconselhar?

CSS

.img-ctn {
    display: inline-block;
    margin-right: 3%;
    max-width: 120px;
    background: #cecece;
}

.img-ctn > img {
    display: block;
    height: auto;
    max-width: 100%;
    min-width: 100%;
    vertical-align: middle;
}

Violino: http://jsfiddle.net/xmJ3R/