pg. pg. - 5 months ago 13
HTML Question

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

I'm using display:table and display:table-cell to display a div as if it were a table. I want the contents of one div (.cellcontents) to be vertically centered as if it were in a table cell, the problem is that I have another div (.cellhead) with the same parent that I want to have vertically aligned to the top.

So what I want is something like this

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


What's the best way to accomplish this? Am I going about this the wrong way entirely? Current 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 is 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;
}
.film .cell.last {
border-right: 1px solid lightgrey;
}

Answer

Here is a solution, but it requires different markup.

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

Setting .cell.detail height to 100% allows it to take up the most space.