Bootstrap 3 列，垂直对齐：底部带有 img

Question

我正在尝试使用 Bootstrap 获得 3 列，图像（不同高度）与底部对齐并居中。

我想要这个：

col-md-4    |    col-md-4    |    col-md-4    
            |                |
            |                |    ---------
 ---------  |                |    ---------
 ---------  |    ----------  |    ---------
 -- img --  |    -- img  --  |    -- img --
 ---------  |    ----------  |    ---------

我试过了，但没有成功，（不居中，行为可疑）...

.vertical-align{
    position: relative;
}
 
.vertical-align img{
    position: absolute;
    bottom: 0;
}

<div class="row">
  <div class="col-md-4 vertical-align">
    <img src="images/antoine.png" />
  </div>
  <div class="col-md-4 vertical-align">
    <img src="images/logo_code.png" />
  </div>
  <div class="col-md-4 vertical-align">
    <img src="images/logo_android.png"/>
  </div>
</div>

请帮帮我，谢谢！

Answer 1

如果您能设置 jsfiddle 或 codepen，将不胜感激。

否则，试试这个：

.vertical-align {
   min-height: 1000px; /*Add a height or minimum height to the containers*/
   position: relative;
}

.vertical-align img{
   position: absolute;
   bottom: 0;
   right: 0;
   left: 0;
   margin-right: auto;
   margin-left:auto;
}

编辑：这是一个带有完整解决方案的 JSfiddle - 图像与底部对齐并在各自的父对象中居中。 https://jsfiddle.net/o4kk49kz/1/

Bootstrap 3 列，垂直对齐：底部带有 img

Bootstrap 3 columns, vertical-align: bottom with img

html

css

image

multiple-columns

twitter-bootstrap