センターCSS表示：テーブル

Question

を使用してdivの下に均等に広がるlisの2番目の行のトリックを使用しているので、liをリストの下に均等に広げたいと思いますが、これはちょうど良い1列の項目が展開されます。下の図からわかるように、2行目の場合、2行目のアイテムは最初の行と同じ幅を維持しますが、それはもう整列しません。どのようにそれを中心にするのですか？ liの数は動的に変化するので、理想的には3つ以上のliが存在する場合は新しい行が作成され、必要に応じて2番目のliの中心が配置されます。一般的に

HTML

<ul class="table"> 
    <div class="table-row"> 
    <li class="cell type type-water">water</li> 
    <li class="cell type type-ghost">ghost</li> 
    <li class="cell type type-ground">ground</li> 
    </div> 
    <div class="table-row"> 
    <li class="cell type type-ice">ice</li> 
    </div> 
</ul> 

CSS

.table { 
    display: table; 
    width: 100%; 
    list-style: none; 
    table-layout: fixed; 
} 

.table-row { 
    display: table-row; 
    width: 100%; 
    list-style: none; 
    table-layout: fixed; 
} 

.cell { 
    display: table-cell; 
    text-align: center; 
} 

Answer 1

、あなたは適切にセンタリングすることはできません。テーブルが表形式で表示されます。それには列と行があります。あなたの最初の行は三つのセルを有し、第2の1の2つのセルを持っている場合

たとえば、あなたが最後に左または右に2、ではなく、中心を揃えることができます。

はしたがって、私はあなたがセルの幅は、各行になりまし独立しているため、ので、私たちができることを行うことができ、細胞が成長させる代わりに

.table-row { 
 
    display: table; 
 
    width: 100%; 
 
    list-style: none; 
 
    table-layout: fixed; 
 
} 
 
.cell { 
 
    display: table-cell; 
 
    text-align: center; 
 
} 
 
.table, .cell { 
 
    border: 1px solid; 
 
}

<div class="table"> 
 
    <div class="table-row"> 
 
    <div class="cell type type-water">water</div> 
 
    <div class="cell type type-ghost">ghost</div> 
 
    <div class="cell type type-ground">ground</div> 
 
    </div> 
 
    <div class="table-row"> 
 
    <div class="cell type type-ice">ice</div> 
 
    </div> 
 
</div>

を中心にお勧めします事実、各行を別の表にラップします。

または、手動で所望の位置にあなたの細胞を配置する要素または擬似要素を挿入することができます。

.table { 
 
    display: table; 
 
    width: 100%; 
 
    table-layout: fixed; 
 
    border-collapse: collapse; 
 
} 
 
.table-row { 
 
    display: table-row; 
 
} 
 
.cell { 
 
    display: table-cell; 
 
    text-align: center; 
 
    border: 2px solid; 
 
} 
 
.insert-before::before, .insert-after::after { 
 
    content: ''; 
 
    display: table-cell; 
 
}

<div class="table"> 
 
    <div class="table-row"> 
 
    <div class="cell type type-water">water</div> 
 
    <div class="cell type type-ghost">ghost</div> 
 
    <div class="cell type type-ground">ground</div> 
 
    </div> 
 
    <div class="table-row insert-before insert-after"> 
 
    <div class="cell type type-ice">ice</div> 
 
    </div> 
 
</div>

をしかし、あなたは場合の細胞数を中心に達成することはできないだろう異なる行は異なるパリティを有する。