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列，vertical-align：bottom with img

1 个答案: