Горизонтально центр строки таблицы

У меня есть таблица, которая выглядит следующим образом: Горизонтально центр строки таблицы

То, что я хотел бы в нижней строке, чтобы быть в центре по горизонтали, так что она будет выглядеть следующим образом:

Как мне это сделать? Обратите внимание, что таблица будет динамической и может содержать четное или нечетное число элементов в последней строке.

Код: https://jsfiddle.net/czyuyt05/2/

<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

Табличные макеты довольно строгие. Если вы хотите придерживаться '

', вам нужно будет положиться на пустые теги '

' inte на стол за руку или на javascript. Если вы хотите использовать только CSS-метод для управления неизвестным количеством ячеек в строке, вам может понадобиться работать с div и отображать встроенный блок, например, здесь: https://jsfiddle.net/a4vr0ksu/ (изменить: неверную ссылку) – Julian

@ Julian I удалось решить эту проблему, обернув каждую строку в таблицу: 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

Вы можете добавить пустую td до и после того, как три 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

Отредактировано раз (извините, отредактированный скрипку ш 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

Смежные вопросы