在 display:table-cell div 中垂直居中文本，该 div 也具有 vertical-align:top 内容答案

【问题标题】：Centering text vertically within a display:table-cell div that also has vertical-align:top content在 display:table-cell div 中垂直居中文本，该 div 也具有 vertical-align:top 内容
【发布时间】：2016-12-31 06:41:34
【问题描述】：

我正在使用 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;
}

【问题讨论】：

为什么要将表格数据放在 div 中？
不是最好的解决方案，也许你可以使用position: absolutejsfiddle.net/Lg0wyt9u/964
因为它使稍后通过媒体屏幕更容易更改显示宽度。
@pg。好的，这是有道理的

标签： html css css-tables

【解决方案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% 可以占用最多的空间。

【讨论】：

谢谢！这会奏效。我知道这有点像嵌套表。更改标记完全没有问题。

【解决方案2】：

查看差异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>

【讨论】：

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

【讨论】：