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

【问题标题】：Equal height columns, with defined aspect ratio, and vertically centered content?等高的列，具有定义的纵横比和垂直居中的内容？
【发布时间】：2016-10-14 04:05:13
【问题描述】：

我有等高的列，内容居中：

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。理想情况下，它看起来是一样的，但可用的后备也是可以接受的。

【问题讨论】：

标签： css

【解决方案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

【讨论】：