В данном примере не работает стиль text-align: center для таблицы - таблица выравнивается по левому краю div.
Текст выравнивается как положено по центру.
Подскажите кто знает - по чему так происходит и как выровнять таблицу по центру?
<style>
div{text-align: center; width: 100%; border: 1px solid red;}
table{border: 1px solid green;}
td{background-color: yellow; width: 50px;}
</style>
<div>
тестовый текст
<table>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</table>
</div>