0

画像をセルデータとして使用する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>
4

2 に答える 2

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/

于 2012-04-27T20:00:56.883 に答える
0

これを試して：

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

display：tablecssおよびmantainoriginal.rowcssクラスでコンテナを使用することもできます

于 2012-04-27T20:22:53.427 に答える