表格單元格/表格/表格單元格。不能居中垂直中間元素

Question

我正在使用表格處理3個元素的自動尺寸。 我喜歡中間獲得所有剩餘的空間 - 第一個和最後一個單元格。 好吧，這可以使用table/table-cell-table-table-cell。

但我無法爲中央單元設置垂直對齊？

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