divベースのテーブルの不均等な行の整列

Question

私は、画像をセルデータとして使用するdivでビルドされたテーブルを持っています。私は不足している画像がある場合、私は、本質的に等行に他の画像をセンタリングしたい：

全画像：

xxxxx 
xxxxx 

欠落画像（第2行目の2）：

xxxxx 
xxx 

現在、私は結果のみが左を揃えるために得ることができます：

xxxxx 
xxx 

CSS：

.table 
{ 
    margin-top:5px; 
    margin-left:15px; 
    margin-right:15px; 
    display: table; 
    width:auto; 
    border-spacing:0px; 
} 

.row 
{ 
    display:table-row; 
    width:auto; 
    margin-left:auto; 
    margin-right:auto; 
} 

.cell 
{ 
    float:left; 
    display:table-column; 
    width:auto; 
} 

私は行の左右に余白を入れましたが、サイコロはありませんでした。助言がありますか？

編集

<div class="table"> 
     <div class="row"> 
      #if ($has1) 
       <div class="cell"><a href="#1"><img src="1.jpg" width="138"/></a></div> 
      #end 
      #if ($has2) 
       <div class="cell"><a href="2"><img src="2.jpg" width="138"/></a></div> 
      #end 
      #if ($has3) 
       <div class="cell"><a href="#3"><img src="3.jpg" width="138"/></a></div> 
      #end 

     </div> 
     <div class="row"> 
      #if ($has4) 
       <div class="cell"><a href="#4"><img src="4.jpg" width="138"/></a></div> 
      #end 
      #if ($has5) 
       <div class="cell"><a href="5"><img src="5.jpg" width="138"/></a></div> 
      #end 
      #if ($has6) 
       <div class="cell"><a href="#6"><img src="6.jpg" width="138"/></a></div> 
      #end 

     </div> 
    </div> 

Answer 1

okが、これを試してみてください。

.table 
{ 
    margin-top:5px; 
    margin-left:15px; 
    margin-right:15px; 
    display: table; 
    width:auto; 
    border-spacing:0px; 
} 

.row 
{ 
    display:table-row; 
    width:auto; 
    margin-left:auto; 
    margin-right:auto; 
    text-align:center; 
} 

.cell 
{ 
    /*display:table-column;*/ 
    display:inline-block; 
    width:auto; 
}​ 

例： http://jsfiddle.net/JARQs/

Answer 2

これを試してみてください：

.row 
{ 
    display:table; 
    width:auto; 
    margin-left:auto; 
    margin-right:auto; 
    text-align:center; 
} 

ディスプレイ付きのコンテナを使用することもできます：table css and mantain original .row css class