将多个图像(垂直对齐到中间)与沿基线对齐的标题对齐

时间:2016-11-07 08:31:22

标签: css html5 image css3 flexbox

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

请注意,所有图像都以不同的方式切割,我无法改变,所以不会因为它们看起来不对齐而无关紧要。

更新:数字标题(跨度)也可能有不同的高度。

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

2 个答案:

答案 0 :(得分: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 plugin(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;
}

答案 1 :(得分:1)

所以我对你的代码进行了以下操作:

  1. 删除baseline

  2. image-row对齐方式
  3. 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;
    }
    
  4. 还在图像周围添加了边框以供说明。请告诉我您对此的反馈,谢谢!

    演示如下:

    &#13;
    &#13;
    .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;
    }
    &#13;
    <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>
    &#13;
    &#13;
    &#13;