将多个图像（垂直对齐到中间）与标题沿基线对齐

Question

我已经尝试这样做了一段时间，但找不到适合我的解决方案。 我从具有不同高度的数据库获取图像，我需要将它们垂直对齐到中间，标题在每个图像的末尾水平对齐。

请注意，所有图像的切割方式都不同，我无法更改它，因此，它们看起来不对齐也没关系。

更新：图形标题（跨度）可能也具有不同的高度。

这是一个Pencode

这是我需要完成的

会非常感谢您的帮助。

<section class="new-products container">
<div class="image-row">
        <!--PRODUCT BLOCK-->
          <div class="product-block col-lg-4 col-md-4 col-xs-12">
            <figure>
              <img src="https://s21.postimg.org/wr1wb9z0n/test2.jpg" class="img-responsive" alt="Foto Producto">
              <figcaption>
                <span class="category">category</span>
                <span class="product-name">Product Name</span>
                <span span="" class="price">price 6€</span>
              </figcaption>
            </figure>  
          </div>  
        <!--PRODUCT BLOCK END-->
        <!--PRODUCT BLOCK-->
          <div class="product-block col-lg-4 col-md-4 col-xs-12">
            <figure>
              <img src="https://s21.postimg.org/z9nlbykqv/test1.jpg" class="img-responsive" alt="Foto Producto">  
              <figcaption>
                <span class="category">category</span>
                <span class="product-name">Product Name</span>
                <span span="" class="price">price 6€</span>
              </figcaption>
            </figure>  
          </div>  
        <!--PRODUCT BLOCK END-->
        <!--PRODUCT BLOCK-->
          <div class="product-block col-lg-4 col-md-4 col-xs-12">
            <figure>
              <img src="https://s21.postimg.org/h84ge5qpz/test3.jpg" class="img-responsive" alt="Foto Producto">  
              <figcaption>
                <span class="category">category</span>
                <span class="product-name">Product Name</span>
                <span span="" class="price">price 6€</span>
              </figcaption>
            </figure>  
          </div>  
        <!--PRODUCT BLOCK END-->
        </div>

.image-row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: baseline;
-webkit-align-items: baseline;
align-items: baseline;
-webkit-box-align: baseline;
-moz-box-align: baseline;
}

.new-products {
    text-align: center;
}

.product-block .category, .product-block .category-special {
    font-size: .75em;
    font-weight: 600;
}

.product-block {
    margin: 0 0 2em;
}

.product-block span {
    display: block;
}

.product-block .category, .product-block .category-special {
    font-size: 1em;
    font-weight: 600;
    letter-spacing: .063em;
    text-transform: uppercase;
}

.product-block .category {
    color: #b10832;
}

Answer 1

将每个图像包装在div中，即

<div class="image-holder">
<img src="https://s21.postimg.org/wr1wb9z0n/test2.jpg" class="img-responsive" alt="Foto Producto">
</div> 

并使用match height js插件（ http://brm.io/jquery-match-height/ ）将相等的高度应用于这些div。 接着

.image-holder {
    float: left;
    width: 100%;
    vertical-align: middle;
}

.image-holder img {
    vertical-align: bottom;
    display: inline-block;
    width: auto;
    max-width: 100%;
    height: auto;
}

.image-holder:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -.25em;
}

Answer 2

因此，我对您的代码执行了以下操作：

1. 删除image-row的baseline对齐

2. 使figure列flexbox并应用以下样式：

    .product-block figure { display: flex; flex-direction: column; height: 100%; } .product-block figure img { border: 1px solid red; margin-top:auto; } .product-block figure figcaption { margin-top:auto; } 

还在图像周围添加了边框以进行说明。 让我知道您对此的反馈，谢谢！

下面的演示：

 .image-row { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /* -ms-flex-align: baseline; -webkit-align-items: baseline; align-items: baseline; -webkit-box-align: baseline; -moz-box-align: baseline; */ } .new-products { text-align: center; } .product-block .category, .product-block .category-special { font-size: .75em; font-weight: 600; } .product-block { margin: 0 0 2em; } .product-block span { display: block; } .product-block .category, .product-block .category-special { font-size: 1em; font-weight: 600; letter-spacing: .063em; text-transform: uppercase; } .product-block .category { color: #b10832; } .product-block figure { display: flex; flex-direction: column; height: 100%; } .product-block figure img { border: 1px solid red; margin-top:auto; } .product-block figure figcaption { margin-top:auto; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <section class="new-products container"> <div class="image-row"> <!--PRODUCT BLOCK--> <div class="product-block col-lg-4 col-md-4 col-xs-12"> <figure> <img src="https://s21.postimg.org/wr1wb9z0n/test2.jpg" class="img-responsive" alt="Foto Producto"> <figcaption> <span class="category">category</span> <span class="product-name">Product Name</span> <span span="" class="price">price 6€</span> </figcaption> </figure> </div> <!--PRODUCT BLOCK END--> <!--PRODUCT BLOCK--> <div class="product-block col-lg-4 col-md-4 col-xs-12"> <figure> <img src="https://s21.postimg.org/z9nlbykqv/test1.jpg" class="img-responsive" alt="Foto Producto"> <figcaption> <span class="category">category</span> <span class="product-name">Product Name</span> <span span="" class="price">price 6€</span> </figcaption> </figure> </div> <!--PRODUCT BLOCK END--> <!--PRODUCT BLOCK--> <div class="product-block col-lg-4 col-md-4 col-xs-12"> <figure> <img src="https://s21.postimg.org/h84ge5qpz/test3.jpg" class="img-responsive" alt="Foto Producto"> <figcaption> <span class="category">category</span> <span class="product-name">Product Name</span> <span span="" class="price">price 6€</span> </figcaption> </figure> </div> <!--PRODUCT BLOCK END--> </div> </div>