在 display:table 单元格 div 中垂直居中文本，该单元格也具有 vertical-align:top 内容

Question

我正在使用 display:table 和 display:table 单元格来显示 div，就好像它是 table。我希望一个 div (.cellcontents) 的内容垂直居中，就好像它在 table 单元格中一样，问题是我有另一个 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

查看差异here

.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;
  height: 20%;
}
.film .cell.last {
  border-right: 1px solid lightgrey;
}
.film .cell.last .cellcontents{
  position: relative;
  top: 50%;
  transform: translateY(70%);
}

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

Answer 2

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

.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% 可以使其占据最大 space。

Answer 3

这里是一个带有绝对定位的简化版本 div。

希望对您有所帮助。

.table {
  display: table;
}
.cell {
  border: 1px solid lightgrey;
  border-right: none;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.table, .cell {
  height: 5em;
}

.cell:first-child {
  width: 140px;
}

.cell:last-child {
  position: relative;
  border-right: 1px solid lightgrey;
  width: 200px;
}

.cell > div.heading {
  background-color: #e5e5e5;
  position: absolute;
  top: 0;
  width: 100%;
}

<div class="table">
  <div class="cell">
    [IMG]
  </div>
  <div class="cell">
    120 minutes
    <div class="heading">length</div>
  </div>
</div>

在 display:table 单元格 div 中垂直居中文本，该单元格也具有 vertical-align:top 内容

Centering text vertically within a display:table-cell div that also has vertical-align:top content

html

css

css-tables