水平居中的錶行

我有一個表，看起來像這樣：水平居中的錶行

我想什麼是底行水平居中，這樣它看起來就像這樣：

我會如何去做這件事？請注意，表格將是動態的，並且在最後一行中可以包含偶數或奇數個元素。

<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

回答

我能夠通過包裝在一個表中的每一行，並在表上設置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

可以在前三個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

再次編輯後（對不起，編輯小提琴W¯¯加空td asn't保存）：

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

使用Flexbox的，沒有表（而不是申報單的表格元素），也沒有行。

<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

相關問題