html - 对齐多个图像(垂直居中对齐)，标题沿基线对齐

Question

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

请注意，所有图像都以不同的方式剪切，我无法更改它，因此它们看起来不对齐并不重要。

更新:图形标题(跨度)也可能具有不同的高度。

Here's a Pencode

Here's what i need to accomplish

非常感谢一些帮助。

<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

所以我对您的代码执行了以下操作:

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>