Center bottom row cells inside table

Yes, this is table-based layout. It’s legacy so I may or may not be able to rip out the table, nonetheless I want to understand how table alignment works anyway, hence this arguably abhorrent question.

Say I have a 3x3 table with the values 1, 2, 3, …, 8. It ends at 8, so the last row only has 2 elements in it. I want those centered.



I would like the CSS rule tr { text-align: center } to work, but I think there’s some sort of table structure rule trumping what text align would do in this case, so some other style property maybe I have to cancel.

Fiddle, including a bunch of CSS that doesn’t do what I want:


If you want those bottom td elements to respect text-align: center, you could change the display of the elements from table-cell to inline-block.

Updated Example

td {
  border-color: red;
  border-style: solid;
  border-width: thin;
  display: inline-block;