Я потратил больше времени, чем хочу признать, пытаясь заставить ряд изображений быть кликабельными ссылками вrow который выравнивает изображения в серединеrow тотне нарушает отзывчивость Bootstrap, Ссылки работают нормально, но выравнивание отключено из-за различий в размерах изображений (хотя все они имеют компактную высоту). Я могу получить изображения для выравнивания по вертикали внутриdiv.row, но это нарушает отзывчивость и изображения не меняются должным образом.

Вот JSFiddle из того, что я пробовал

Вот что я пытаюсь сделать:

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

Вот лучшее, что я могу придумать:

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

Этот ответ это именно то, чего я пытаюсь достичь, однако изображения не центрируются вертикально для меня, когда я использую классы CSS из него.

У меня есть изображения, которые являются компактными пейзажными изображениями в проекте Bootstrap. Попытка выровнять изображения по вертикали в ряду

Что я пробовал:

Вот с чего я начал:

<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>

Я могу сделать так, чтобы все отображалось в строке в виде кликабельной ссылки, но из-за небольших различий в размерах изображений изображения не выравниваются по вертикали в центре ряда. Я добавил этоvertical-align на обычном экране, но это нарушает отзывчивость Bootstrap при изменении размера окна.

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

Для второй попытки я удалил класс вертикального выравнивания изdiv.row и удалил Bootstrap'simg-responsive класс изimg тег, как показано ниже:

<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>

В моем CSS-файле я добавил эти классы:

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

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

Приведенные выше классы CSS не нарушают Bootstrap, но выравнивают изображения по вершинам, а не по вертикальному центруdiv.row.

Я пробовал кучу других вещей, но я не могу заставить его работать. Этот пост выглядел полон обещаний, но я не мог заставить его работать:

Как выровнять изображение по вертикали в div

Я хотел бы выяснить это с помощью CSS и HTML, а не jQuery. Любые предложения по поводу того, что я выдумал, будет принята с благодарностью.