Центрирование текста по вертикали внутри дисплея: div ячейки таблицы также имеет вертикальное выравнивание: верхнее содержимое

Я использую display: table и display: table-cell для отображения div, как если бы это была таблица. Я хочу, чтобы содержимое одного div (.cellcontents) было вертикально центрировано, как если бы оно находилось в ячейке таблицы, проблема в том, что у меня есть еще один div (.cellhead) с тем же родителем, который я хочу вертикально выровнять в верхней части ,Центрирование текста по вертикали внутри дисплея: div ячейки таблицы также имеет вертикальное выравнивание: верхнее содержимое

Так какой Хочу нечто вроде этого

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

КСС здесь

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

источник

2016-06-09 pg.

Почему вы ввода табличных данных в дивы? – Midas

Не лучшее решение купить, может быть, вы можете использовать 'position: absolute' https://jsfiddle.net/Lg0wyt9u/964/ –

Потому что я упрощаю смену дисплея с помощью медиа-экрана для ширины позже. –

Вот решение, но оно требует различной разметки.

.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% позволяет ему занимать много места.

источник

2016-06-09 20:39:21 Midas

спасибо! это сработает. Я знал, что это что-то вроде гнездящихся столов. Изменение разметки вообще не проблема. –

Смотрите различия 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>

источник

2016-06-09 20:25:37 Mojtaba

Здесь представлена упрощенная версия с абсолютным расположением 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>

источник

2016-06-09 21:45:18 DavidDomain

Центрирование текста по вертикали внутри дисплея: div ячейки таблицы также имеет вертикальное выравнивание: верхнее содержимое

ответ

Смежные вопросы