Passei mais tempo do que gostaria de admitir tentando obter uma linha de imagens para serem links clicáveis em umrow que alinha as imagens no meio dorow estenão quebra a capacidade de resposta do Bootstrap. Os links funcionam bem, mas o alinhamento está desativado, devido a variações no tamanho das imagens (embora todas sejam de paisagem de altura compacta). Consigo alinhar as imagens verticalmente dentrodiv.row, mas interrompe a capacidade de resposta e as imagens não são redimensionadas corretamente.

Aqui está um JSFiddle do que eu tentei

Aqui está o que estou tentando fazer:

row
--------------------------------------------------------
                  |                  |                  
      image1      |      image2      |      image3      
                  |                  |                  
--------------------------------------------------------

Aqui está o melhor que posso encontrar:

row
--------------------------------------------------------
      image1      |      image2      |      image3      
                  |      image2      |      image3      
                  |      image2      |            
--------------------------------------------------------

Esta resposta é exatamente o que estou tentando alcançar, no entanto, as imagens não são centralizadas verticalmente para mim quando uso as classes CSS dele.

Eu tenho imagens que são todas imagens compactas de paisagem em um projeto Bootstrap. Tentando alinhar as imagens verticalmente dentro da linha

O que eu tentei:

Aqui está o que eu comecei:

<div class="row vertical-align">
    <div class="col-sm-4">
        <a href="#" title=""><img src="../img/my-image-1.png" class="img-responsive"></a>
    </div>
    <div class="col-sm-4">
        <a href="#" title=""><img src="../img/my-image-1.png" class="img-responsive"></a>
    </div>
    <div class="col-sm-4">
        <a href="#" title=""><img src="../img/my-image-1.png" class="img-responsive"></a>
    </div>    
</div>

Posso fazer com que tudo apareça em uma linha como um link clicável, mas devido a pequenas variações no tamanho das imagens, as imagens não se alinham no centro vertical da linha. Eu adicionei issovertical-align em uma tela normal, mas interrompe a capacidade de resposta do Bootstrap quando a janela é redimensionada.

.vertical-align {
    display: flex;
    align-items: center;
}

Na minha segunda tentativa, removi a classe de alinhamento vertical dodiv.row e removeu o Bootstrapimg-responsive classe doimg tag, da seguinte maneira:

<div class="row">
    <div class="col-sm-4">
        <div><a href="#"><img src="../img/my-image-1.png"></a></div>
    </div>
    <div class="col-sm-4">
        <div><a href="#"><img src="../img/my-image-2.png"></a></div>
    </div>
    <div class="col-sm-4">
        <div><a href="#"><img src="../img/my-image-3.png"></a></div>
    </div>    
</div>

No meu arquivo CSS, adicionei estas classes:

.jumbotron .row > a {
    display: block;
}

.jumbotron > .row div a img {
    max-height: 80px;
    max-width: 100%;
    vertical-align: middle;
}

As classes CSS acima não quebram o Bootstrap, mas alinham as imagens ao longo das partes superiores, não no centro vertical dodiv.row.

Eu tentei várias outras coisas, mas não consigo fazer funcionar. Este post parecia cheio de promessas, mas não consegui fazê-lo funcionar:

Como alinhar verticalmente uma imagem dentro de div

Eu gostaria de descobrir isso com CSS e HTML, sem jQuery. Quaisquer sugestões re: o que estou fazendo seria muito apreciada.