調整基於div的表格中的不均勻行

我有一個使用圖像作爲單元格數據的div構建的表。如果我有一個丟失的圖片，我想基本上居中行中的其他圖像這樣：調整基於div的表格中的不均勻行

所有圖片：

xxxxx 
xxxxx

缺少圖像（第二排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>

來源

2012-04-27 user82302124

你試過「margin：0 auto」嗎？ – MCSI 2012-04-27 18:56:11

是的 - 沒有運氣。相同的結果。 – user82302124 2012-04-27 19:04:39

你可以發佈的HTML？一個jsfiddle？ – MCSI 2012-04-27 19:05:15

沒關係，試試這個：

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

來源

2012-04-27 20:00:56 MCSI

這是死的權利。奇怪的是，我所有的圖像都堆疊在一起。唯一不會發生的方式是，如果float屬性被分配給單元格。任何想法？ – user82302124 2012-04-27 20:13:49

嗯，試着改變「display：inline-block;」用「display：table-column;」。我只在「行」中添加了「text-align：center」，並在「cell」 – MCSI 2012-04-27 20:18:42

中「殺死了」float：left。我開始懷疑Velocity模板是否在這裏造成問題。 – user82302124 2012-04-27 20:28:30

試試這個：

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

你也可以使用顯示容器：表css和mantain原始.row css類

來源

2012-04-27 20:22:53

調整基於div的表格中的不均勻行

回答

相關問題