異なる列に画像の一番下を整列させる（ブートストラップ）

Question

私のウェブサイトには3つのブートストラップカラムがあり、それぞれに写真があります。問題は、タイトルの長さが異なることです。ブラウザのサイズを（1100ピクセルの幅で）サイズ変更すると、写真とその段落のいずれかが少し下にずれることがあります。写真と下の方のpragraphと上のタイトル？ここで

は私が JsFiddleの列はすべて（モバイルデバイス上のように）1列にし、複数のない理由が、今ないが、あなたはそれを保存するかもしれない場合や

を持っている問題のJsFiddleですあなたのブラウザでそれを開き、あなたは問題を見ることができます。

HTML：

<div class="container-fluid"> 
<div class="row "> 
<div class="col-md-4 column"> 
    <center> 
    <h1>Babababababababababababababa</h1> 
    <p>2013 - Now</p> 
    <div> 
     <div class="container-images"> <img class="image" src="https://iso.500px.com/wp-content/uploads/2016/05/stock-photo-93725859-1500x1000.jpg"> 
     <div class="over"> 
      <p class="title">aaa</p> 
      <p class="rayal">aaaaaa</p> 
     </div> 
     </div> 
    </div> 
    </center> 
</div> 
<div class="col-md-4 column"> 
    <center> 
    <h1>Bababababababababababababababababa</h1> 
    <p>2009 - 2013</p> 
    <div class="container-images"> <img class="image" src="https://iso.500px.com/wp-content/uploads/2016/05/stock-photo-93725859-1500x1000.jpg"> 
    <div class="over"> 
     <p class="title">aaa</p> 
     <p class="rayal">aaaaa</p> 
    </div> 
    </center> 
    </div> 
    <div class="col-md-4 column"> 
    <center> 
    <h1>Babababababababababababababab</h1> 
    <p>2007 - 2009</p> 
    <div class="container-images"> <img class="image" src="https://iso.500px.com/wp-content/uploads/2016/05/stock-photo-93725859-1500x1000.jpg"> 
     <div class="over"> 
     <p class="title">aaa</p> 
     <p class="rayal">aaaaa</p> 
     </div> 
     </center> 
    </div> 
    </div> 
</div> 

CSS：

.container-images { 
    height: 300px; 
    width: 75%; 
    overflow: hidden; 
    display: flex; 
    /* align-items: center;*/ 
    justify-content: center; 
    position: relative; 
    border-radius: 100px; 
} 

.image { 
    width: 100%; 
    height: 100%; 
    position: relative; 
    z-index: 1; 
    background-size: cover; 
    border-radius: 100px; 
    display: block; 
    float: left; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    margin-bottom: 50px; 
} 

.over { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column; 
    z-index: 2; 
    background: rgba(0, 0, 0, 0.2); 
    transition: all 0.3s ease-in-out; 
    border-radius: 100px; 
} 

.title { 
    margin-top: 100px; 
    color: white; 
    transition: all 0.5s ease-in-out; 
    font-family: RobotoSlab-Regular; 
    opacity: 0; 
} 

.rayal { 
    opacity: 0; 
    color: white; 
    transition: all 0.5s ease-in-out; 
    font-family: RobotoSlab-Regular; 
} 

.over:hover { 
    background: rgba(0, 0, 0, 0.5); 
} 

.over:hover .title { 
    margin-top: 0; 
    opacity: 1; 
} 

.over:hover .rayal { 
    opacity: 1; 
} 

Answer 1

これはフレキシボックスのための良い例です。

ここにあなたのplunkerの更新例です：私はあなたの<center>タグを削除

1. ：

   https://jsfiddle.net/eqcyyae9/9/

   は、この上のいくつかの注意事項。これらは減価償却されており、（hereのように）それらを使用するのは良い習慣ではありません。ブートストラップcenter-block CSSクラスを使用しても同じ効果が得られます。

2. container-imagesクラスのflexboxプロパティを削除しました。その場合に行っていたセンタリングはcenter-blockで処理されます。個人的な好みとしては、必要に応じてFlexboxを使用するだけなので、古いブラウザではCSSができるだけ正常に機能しなくなります。
3. container-contentクラスを追加しました。はにフレックスボックスを付けました。 space-between属性とflex-direction: columnを使用すると、コンテンツが指定された領域（この例では570px）を占めることができます。ヘッダーは常に上部に固定され、画像は下部に固定され、余分なスペースは中間（つまりスペース間）になります。あなたがそれに興味を持っているなら、このhereには本当に良い記事があります。

plunkerは、すべてのファイル依存関係を「外部リソース」セクションに直接追加するのではなく、HTMLに直接追加するように求めます。だからあなたはあなたのブートストラップスタイルが見えていないのです。