显示相同级别/高度的列的内容

Question

我的div中的列设置为display:flex。所有列都居中。列内容均为vertical-align: middle;

当内容具有相同的高度时，它的效果很好（请参阅代码段）。但是当一列高于其他列时，我希望较短的列与最高的列处于同一水平/高度，如下图所示，而最高的列保持垂直在中间：

这可以使用css或javascript吗？

.cont { height:400px;  width: 100% }
.button-bottom {display: flex;
align-items: center;
justify-content: center; height:50%;background: yellow;}

.column {width: 20%;
display: table-cell;
text-align: center;
vertical-align: middle;
float: none;}

<div class="cont">  
  <div class="button-bottom">
     <div class="column">
       <h5>Ambience Blah BLha mana na hhsjs</h5>
     </div>
    <div class="column">
       <h5>Ambience</h5>
     </div>
    <div class="column">
       <h5>Ambience</h5>
     </div>
    <div class="column">
       <h5>Ambience</h5>
     </div>
    <div class="column">
     <h5>Ambience</h5>
     </div>
  </div>
  </div>

Answer 1

我这样做是为了积分。这是你的修复。

＆＃13;

＆＃13;

.cont { height:400px;  width: 100% }
.button-bottom {display: flex;
justify-content: center; height:50%;background: yellow;}
.column {width: 20%;
display: table-cell;
float: none;}

＆＃13;

<div class="cont">  
  <div class="button-bottom">
     <div class="column">
       <h5>Ambience Blah BLha mana na hhsjs</h5>
     </div>
    <div class="column">
       <h5>Ambience</h5>
     </div>
    <div class="column">
       <h5>Ambience</h5>
     </div>
    <div class="column">
       <h5>Ambience</h5>
     </div>
    <div class="column">
     <h5>Ambience</h5>
     </div>
  </div>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

https://jsfiddle.net/ex3ntia/r67y6hhu/3/

我添加了2条你可以删除的css行

/* demo */
h5 {position:relative;}
.column h5:before {display:block;background-color:red;content:'';width:100%;height:2px;top:15px;position:absolute;}