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

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的宽高比。在极少数情况下会有很多内容，在这种情况下可以改变aespect比率。

我已经在下面工作，但它会停止内容垂直居中：

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