等高線、定義されたアスペクト比、垂直中心のコンテンツ？

Question

私が中心コンテンツと同等の高さの列があります。

http://codepen.io/anon/pen/BzKwgE

<div class="cont"> 
    <div class="item item-first"> 
    <p>First</p> 
    </div> 
    <div class="item item-second"> 
    <p>Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second </p> 
    </div> 
    <div class="item item-third"> 
    <p>Third</p> 
    </div> 
</div> 

* { 
    box-sizing: border-box; 
} 
.cont { 
    width: 70%; 
    display: table; 
} 
.item { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    padding: 20px; 
    width: 33%; 
} 
.item-first { 
    background: blue; 
} 
.item-second { 
    background: green; 
} 
.item-third { 
    background: blue; 
} 

これは素晴らしい取り組んでいます。しかし私はまた、私の列が16×9のアスペクト比を持つ必要があります。まれに、多​​くのコンテンツが存在します。その場合は、表示率を変更することもできます。

http://codepen.io/anon/pen/pbyWMj

* { 
    box-siing: border-box; 
} 
.cont { 
    width: 70%; 
    display: table; 
} 
.item { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    padding: 20px; 
    width: 33%; 
} 
.item:before { 
    padding-bottom: 56.25%; // 16:9 ratio 
    display: block; 
    content: ''; 
    float: left; 
    width: 1px; 
} 
.item-first { 
    background: blue; 
} 
.item-second { 
    background: green; 
} 
.item-third { 
    background: blue; 
} 

私はこれが原因パディングハックに起こっていることがわかります。

アイブ氏は、それが垂直方向の中央されているコンテンツを中止ただし、以下の作業これを得ました。同じ高さの列、垂直方向に配置されたコンテンツ、16×9のアスペクト比を持つ方法はありますか？

私はIE9をサポートしています。理想的には同じように見えますが、使用可能なフォールバックも受け入れられます。

Answer 1

inline-blockとvertical-alignは、各項目内の要素に使用できます。これを試してみてください：

.item { 
    display:table-cell; 
    vertical-align:middle; 
    text-align: center; 
    width: 33%; 
} 
.item:before { 
    padding-bottom: 56.25%; 
    display: inline-block; 
    content: ''; 
    width: 0; 
    vertical-align:middle; 
    margin-right:-4px; 
} 
.item p { 
    display:inline-block; 
    vertical-align:middle; 
    padding:20px; 
} 

Codepen Update