Indeed, this layout is based on tables. It's a legacy design, so removing the table structure may not be feasible. Nevertheless, I am curious to learn about table alignment, hence posing this somewhat unconventional question.
Imagine a 3x3 table with values from 1 to 8. The last row contains only 2 elements, and I want those centered.
Snippet of HTML code:
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td></tr>
</table>I have attempted using the CSS rule tr { text-align: center }, but it seems there might be some table structure overriding the center alignment and I need to figure out which style property to override.
Here's a Fiddle link with various CSS attempts that didn't achieve the desired result: http://jsfiddle.net/sdqtg7kr/