水平センターテーブル行

私はこのようになりますテーブルがあります。それはこのようになりますように、私が好きな何水平センターテーブル行

は、水平方向の中央べき一番下の行です：

これをどうやってやりますか？テーブルは動的になり、最後の行に偶数または奇数の要素を持つことができます。

<table class="dna-table"> 
    <tr class="dna-row"> 
    <td class="dna-element"><p class="symbol">Co</p></td> 
    <td class="dna-element"><p class="symbol">Cn</p></td> 
    <td class="dna-element"><p class="symbol">En</p></td> 
    <td class="dna-element"><p class="symbol">Ps</p></td> 
    <td class="dna-element"><p class="symbol">Gr</p></td> 
    </tr> 
    <tr class="dna-row"> 
    <td class="dna-element"><p class="symbol">Pr</p></td> 
    <td class="dna-element"><p class="symbol">Rs</p></td> 
    <td class="dna-element"><p class="symbol">In</p></td> 
    </tr> 
</table>

CSS

.dna-table { 

} 

.dna-row { 
    text-align: center; 
    margin: auto; 
    width: 100%; 
} 

.dna-element { 
    border: 1px solid gray; 
    width: 100px; 
    height: 120px; 
    text-align: center; 
    margin: auto; 
} 

.symbol { 
    font-size: 30px; 
    font-weight: bold; 
}

出典

2016-06-25 Snowman

テーブルレイアウトはかなり厳しいです。 '

'に固執したい場合は、空の ''タグを手札またはJavaScriptごとに置くことに頼る必要があります。行ごとに未知の量のセルを管理するCSS専用の方法が必要な場合は、次のようにdivで作業してインラインブロックを表示したい場合があります。https://jsfiddle.net/a4vr0ksu/（編集：間違ったリンク） – Julian

@ Julian私はテーブルの各行をラップすることでそれを解決することができました：http://stackoverflow.com/a/38033843/458960 – Snowman

答えて

Iは、テーブル内の各行を包む、そしてテーブル上margin: autoを設定することにより、この問題を解決することができた：

https://jsfiddle.net/czyuyt05/4/

<table class="dna-table"> 
    <table class="dna-table"> 
    <tr class="dna-row"> 
     <td class="dna-element"><p class="symbol">Co</p></td> 
     <td class="dna-element"><p class="symbol">Cn</p></td> 
     <td class="dna-element"><p class="symbol">En</p></td> 
     <td class="dna-element"><p class="symbol">Ps</p></td> 
     <td class="dna-element"><p class="symbol">Gr</p></td> 
     </tr> 
    </table> 
    <table class="dna-table"> 
    <tr class="dna-row"> 
     <td class="dna-element"><p class="symbol">Pr</p></td> 
     <td class="dna-element"><p class="symbol">Rs</p></td> 
    </tr> 
    </table> 
</table>

CSS ：

.dna-table { 
    margin: auto; 
}

出典

2016-06-25 23:29:06 Snowman

あなたは3 tds https://jsfiddle.net/czyuyt05/3/

<table class="dna-table"> 
    <tr class="dna-row"> 
    <td class="dna-element"><p class="symbol">Co</p></td> 
    <td class="dna-element"><p class="symbol">Cn</p></td> 
    <td class="dna-element"><p class="symbol">En</p></td> 
    <td class="dna-element"><p class="symbol">Ps</p></td> 
    <td class="dna-element"><p class="symbol">Gr</p></td> 
    </tr> 
    <tr class="dna-row"> 
    <td></td> 
    <td class="dna-element"><p class="symbol">Pr</p></td> 
    <td class="dna-element"><p class="symbol">Rs</p></td> 
    <td class="dna-element"><p class="symbol">In</p></td> 
    <td></td> 
    </tr> 
</table>

出典

2016-06-25 23:06:12

ええと。うーん、それは動作しますが、特にCSSテーブルは動的に生成され、サイズが変更されます。 – Snowman

最後の行に偶数のセルがある場合、これも機能しません。 – Snowman

前と後に空tdを追加することができます再編集（申し訳ありませんが、編集したフィドルのw asn't保存）：

https://jsfiddle.net/egssk58w/6/

使用フレキシボックス、なしテーブル（div要素の代わりに、テーブル要素）ともなし行。

<div class="dna-table"> 
    <div class="dna-element"> 
    <p class="symbol">Co</p> 
    </div> 
    <div class="dna-element"> 
    <p class="symbol">Cn</p> 
    </div> 
    <div class="dna-element"> 
    <p class="symbol">En</p> 
    </div> 
    <div class="dna-element"> 
    <p class="symbol">Ps</p> 
    </div> 
    <div class="dna-element"> 
    <p class="symbol">Gr</p> 
    </div> 
    <div class="dna-element"> 
    <p class="symbol">Pr</p> 
    </div> 
    <div class="dna-element"> 
    <p class="symbol">Rs</p> 
    </div> 
    <div class="dna-element"> 
    <p class="symbol">In</p> 
    </div> 
</div>

CSS：

.dna-table { 
    width: 100%; 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
} 

.dna-element { 
    flex: 0 0 auto; 
    border: 1px solid gray; 
    width: 100px; 
    height: 120px; 
    text-align: center; 
} 

.symbol { 
    font-size: 30px; 
    font-weight: bold; 
}

出典

2016-06-25 23:14:02 Johannes

これはすでに投稿されている回答と同じです。最後の行に偶数の要素がある場合は機能しません。 – Snowman

はい、上の列に並んでいなくても中央に配置してください。 – Snowman

カラムの数に関係なく動作するソリューションが見つかりました：http://stackoverflow.com/a/38033843/458960 – Snowman

水平センターテーブル行

答えて

関連する問題