css - 等高的列，具有定义的纵横比和垂直居中的内容？

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;
}

这很好用。但是，我还需要我的列具有 16x9 的纵横比。在极少数情况下会有很多内容，在这种情况下可以更改纵横比。

我在下面得到了这个工作但是它停止了垂直居中的内容:

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;
}

我可以看到这是由于填充黑客而发生的。有没有办法让列的高度相等，内容垂直居中，宽高比为 16x9？

我支持 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