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

debugcn 发表于 Dev

安托万

我正在尝试使用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>

请帮帮我，谢谢！

米克·雪莉（Mick Sherry）

如果您可以设置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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。