Equal height columns, with defined aspect ratio, and vertically centered content? - css

Question

I have equal height columns with centered content:
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;
}
This is working great. However I also need my columns to have a 16x9 aspect ratio. In rare cases there will be a lot of content, in which case its OK to change the aespect ratio.
Ive got this working below however it stops the content being vertically centered:
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;
}
I can see that this is happening due to the padding hack. Is there a way to have equal height columns, vertically centered content, and the 16x9 aspect ratio?
Im supporting IE9. Ideally it would look the same, but a usable fallback is also acceptable.

Answer 1

You can use inline-block and vertical-align on the elements inside each item. Try this:
.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