將多個圖像（與中間垂直對齊）與沿基線對齊的字幕對齊

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

裹內一個div即，每個圖像，

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

和施加相等的高度，以使用匹配高度的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. 刪除baseline對齊方式image-row

2. 充分利用figure SA列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>