html - 在显示中垂直居中文本 :table-cell div that also has vertical-align:top content

Question

我正在使用 display:table 和 display:table-cell 来显示一个 div，就像它是一个表格一样。我希望一个 div (.cellcontents) 的内容垂直居中，就好像它在表格单元格中一样，问题是我有另一个 div (.cellhead) 具有相同的父级，我希望垂直对齐到顶部.

所以我想要的是这样的

|     |length|
|     |      |
|[img]| 120m |
|     |      |

实现此目标的最佳方法是什么？我会完全以错误的方式解决这个问题吗？当前 html:

<div class="table">
  <div class="film row">
    <div class="poster cell">[IMG]</div>
    <div class="detail cell last">
      <div class="cellhead">length</div>
      <div class="cellcontents">120 minutes</div>
    </div>
  </div>
</div>

CSS在这里

.table {
  display: table;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  border: 1px solid lightgrey;
  border-right: none;
}
.film .cell.poster {
  text-align: center;
  vertical-align: middle;
  width: 140px;
  height: 5em;
}
.film .cell.detail {
  vertical-align: top;
  text-align: center;
  width: 200px;
}
.film .cell div.cellhead {
  background-color: #e5e5e5;
}
.film .cell.last {
  border-right: 1px solid lightgrey;
}

Answer 1

这是一个解决方案，但它需要不同的标记。

.table {
    display: table;
    text-align: center;
    border-left: 1px solid lightgrey;
}
.table .table {
    width: 100%;
    height: 100%;
    border: none;
}
.row, .cell {
    vertical-align: middle;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
    border: 1px solid lightgrey;
    border-width: 1px 1px 1px 0;
    height: 5em;
}
.cell .cell {
    border: none;
}
.row.head {
    background-color: #e5e5e5;
}
.cell.detail {
    height: 100%;
    width: 200px;
}
.cell.poster {
    height: 5em;
    width: 140px;
}

<div class="table">
    <div class="cell poster">[IMG]</div>
    <div class="cell">
        <div class="table">
            <div class="row head">length</div>
            <div class="cell detail">120 minutes</div>
        </div>
    </div>
</div>

将 .cell.detail 高度设置为 100% 可以让它占用最多的空间。