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％可以占用最多空间。

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

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>

在显示中垂直居中文本：table-cell div也具有vertical-align：top内容

3 个答案: