在基于 div 的表中对齐不均匀的行答案

【问题标题】：Aligning uneven rows in div based table在基于 div 的表中对齐不均匀的行
【发布时间】：2012-04-27 18:51:56
【问题描述】：

我有一个用 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>

【问题讨论】：

你试过“margin:0 auto”吗？
是的 - 不走运。结果相同。
你能发布html吗？一个jsfiddle？
添加了 html。在 div 中也使用 apache 速度模板。

标签： html css image

【解决方案1】：

好的，试试这个：

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

【讨论】：

这完全正确。奇怪的是，我所有的图像都堆叠在一起。唯一不会发生的方法是将 float 属性分配给单元格。有什么想法吗？
嗯，尝试更改“display:inline-block;”使用“显示：表列；”。我只在“rows”中添加了“text-align:center”，并在“cell”中“杀死”了“float:left”
嗯.. 也没有运气。我开始怀疑 Velocity 模板是否在这里造成了问题。
很抱歉没有解决这个问题。我改变了那个属性，仍然没有运气。
我能想到的最后一件事是你在你的作品中发布一个链接，这样我就可以看到缺少什么

【解决方案2】：

试试这个：

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

您还可以使用带有 display:table css 和维护原始 .row css 类的容器

【讨论】：