カラムのコンテンツを正しく整列させる

Question

これは現在私が扱っているレイアウトです。

私は適切な列にコンテンツを揃える方法についていくつかの一貫した考えを持っていません。パラグラフは常にシフトされ、列の高さもいっぱいではないので、何かが欠けていると思います。ここに私がこれまで持っていたのはhttps://jsfiddle.net/scmk01jr/です。

html, body, .container { 
    height: 100%; 
} 

.container { 
    display:table; 
    width: 100%; 
    margin-top: -50px; 
    padding: 50px 0 0 0; 
    box-sizing: border-box; 
} 

.height-100 { 
    height: 100%; 
    display: table-row; 
} 

Answer 1

フレキシボックスはここで良い解決策かもしれません：

https://jsfiddle.net/6c4agx54/2/

HTML：

<div class="container"> 
    <div class="col"> 
    <div> 
     <img src="http://placehold.it/80x25" /> 
     <h6> 
     Small Hdr 
     </h6> 
     <p> 
     This is some text below the h6 heading. 
     </p> 
    </div> 
    </div> 
    <div class="col"> 
    <div> 
     <img src="http://placehold.it/80x25" /> 
     <h6> 
     Small Hdr 
     </h6> 
     <p> 
     This is some text below the h6 heading. 
     </p> 
    </div> 
    </div> 
    <div class="col"> 
    <div> 
     <img src="http://placehold.it/80x25" /> 
     <h6> 
     Small Hdr 
     </h6> 
     <p> 
     This is some text below the h6 heading. 
     </p> 
    </div> 
    </div> 
    <div class="col"> 
    <div> 
     <img src="http://placehold.it/80x25" /> 
     <h6> 
     Small Hdr 
     </h6> 
     <p> 
     This is some text below the h6 heading. 
     </p> 
    </div> 
    </div> 
</div> 

とCSS：

html, body { 
    height: 100%; 
} 

body { 
    margin: 0; 
    color: #fff; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 15px; 
} 

.container { 
    min-height: 100%; 
    display: flex; 
} 

.col { 
    width: 20%; 
    float: left; 
    padding-left: 2.5%; 
    padding-right: 2.5%; 
    background: #F66A6D; 
    display: flex; 
    align-items: center; 
} 

.col:nth-child(even) { 
    background: #F9B7B8; 
} 

h6 { 
    font-size: 17px; 
    border-bottom: 1px solid #fff; 
    margin: 0; 
    padding-bottom: 10px; 
} 

注：私はFRを削除あなたがフィドルに追加した熟練 - プレーンなHTMLとCSSでこれを行うことができれば、それらを非常に簡単にマージすることができるはずです。このバニラバージョンがコミュニティに役立ちます。