table-cell/table/table-cell. Не может центрировать по вертикали средний элемент

Question

Я использую таблицу aproach для автоматического измерения для 3 элементов. Мне нравится, что середина получает все оставшееся пространство - первую и последнюю ячейку. ОК, Это работает с использованием таблицы/таблицы-ячейки-таблицы-таблицы-ячейки.

Но я не могу установить вертикальное смещение для центральной ячейки?

          
  
 
   
 
    
<div style="display: table; width: 163px; height: 80px;"> 
 

 
\t <div style="display: table-cell; vertical-align: middle; width: 1px;">c1</div> 
 

 
\t <div style="display: table;> 
 
\t <div style="display: table-cell; vertical-align: middle; width: 100%;"> 
 
\t <div>c2</div> 
 
\t </div> 
 
\t </div> 
 

 
\t <div style="display: table-cell; vertical-align: middle; width: 1px;">c3<div> 
 

 
</div>
 
   
 
  
 
 

 

Я пробовал много стилей с «c2» ячейки и ее родителей, но безуспешно. Могу ли я предоставить вертикальный размер центральной колонке 'table'?

Я хочу, чтобы решение этого подхода (элементы таблицы стилей)

Любая помощь будет оценена.

Answer 1

Сделать центральную ячейку display: table-cell также с vertical-align: middle:

<div style="display: table; width: 163px; height: 80px; background: coral;"> 
 
    <div style="display: table-cell; vertical-align: middle; width: 1px; background: #DDD;">c1</div> 
 
    <div style="display: table-cell; vertical-align: middle;"> 
 
     <div> 
 
      <div>c2</div> 
 
     </div> 
 
    </div> 
 
    <div style="display: table-cell; vertical-align: middle; width: 1px; background: #DDD;"> 
 
     c3 
 
    </div> 
 
</div>