在顯示器中垂直居中顯示文本：table-cell div也具有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％，允許它佔用了大部分空間。

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>