text-align: center non mi funziona su Opera e FF

[Nosfe]

Ciau ragazzi

Mi sto addentrando in CSS (perché mi sono reso conto che lo usavo in modo davvero basilare) togliendo qualsiasi attributo dall'html per farlo validare XHTML BASIC 1.0. Tutto bene, sorprendentemente

Tranne una cosa. Ho una piccola tabella e la voglio centrare.

Allora questo è l'html:

<div id="centrale">	
   <table class="bbtable">
        <tr>
          <th></th>
          <th>Titolo</th>
          <th>Genere</th>
        </tr>
<tr>
          <td>
[img]img.htm[/img]
</td>
          <td class="tdtit">Sin City</td>
          <td class="tdgen">Azione</td>
</tr>
<tr>
          <td colspan="3" class="tdspacer"></td>
</tr>
<tr>
          <td>
[img]img.htm[/img]
</td>
          <td class="tdtit">wefwe</td>
          <td class="tdgen">Azione</td>
</tr>
<tr>
          <td colspan="3" class="tdspacer"> </td>
</tr>
<tr>
          <td>
[img]img.htm[/img]
</td>
          <td class="tdtit">Pitch Black</td>
          <td class="tdgen">Horror</td>
</tr>
<tr>
          <td colspan="3" class="tdspacer"></td>
</tr>
</table>
</div>

Questo invece il CSS:

div#centrale{
text-align:center;
}
table.bbtable {
    table-layout:auto;
    border-collapse:collapse;
    border: 1px solid #0000FF;
    background: #00EAEA;
}
th    {
    font-size: 12px;
    font-weight: bold;
    background-color: #00FFCC;
    color: #0066FF;
    letter-spacing: 2pt;
    padding: 2px;
    padding-right: 7px;
    padding-left: 10px;
}
.tdspacer {
    background-color: #00FFCC;
    font-size:10px;
}
.tdtit {
    background-color: #00FF99;
    font-size: 12px;
    font-weight: bold;
    border-right-width: 10px;
    border-left-width: 10px;
    border-right-style: solid;
    border-left-style: solid;
    border-top-color: #00EAEA;
    border-right-color: #00EAEA;
    border-bottom-color: #00EAEA;
    border-left-color: #00EAEA;
    text-align:left;
}
.tdgen {
    background-color: #00FF99;
    text-align:left;
    font-size: 12px;
    font-weight: bold;
} 

Il problema è che su IE6 me lo fa centrato, su Opera e FireFox (meno usati, ma più importanti per me ) invece no.

Come posso ovviare al problema?

Grazie in anticipo

[euge90]

togli il div e metti nel css modifichi così

table.bbtable {
    margin-right: auto;
    margin-left: auto;
    table-layout:auto;
    border-collapse:collapse;
    border: 1px solid #0000FF;
    background: #00EAEA;
}

EDIT: il div lo puoi anche lasciare
in più puoi snellire il codice css per esempio se tutti i bordi hanno lo stesso colore è sufficiente mettere border-color: #xxxxxx

[Nosfe]

Originariamente inviato da euge90
togli il div e metti nel css modifichi così

table.bbtable {
    margin-right: auto;
    margin-left: auto;
    table-layout:auto;
    border-collapse:collapse;
    border: 1px solid #0000FF;
    background: #00EAEA;
}

Grazie ora provo subito

in più puoi snellire il codice css per esempio se tutti i bordi hanno lo stesso colore è sufficiente mettere border-color: #xxxxxx

Si infatti piano piano lo sto facendo solo che usando Dreamweaver per modificare il CSS mi genera sempre il codice così e poi lo devo riandare a modificare.

EDIT: Perfetto funziona! Ancorar ne devo scoprire di trucchetti co sti CSS