td: prima e vertical-align: middle

Question

Io uso questa costruzione per ottenere tabella con celle quadrate:

table { 
    width: 100%; 
    table-layout: fixed; 
} 
td { 
    text-align: center; 
    vertical-align: middle; 
} 
td:before { 
    content: ''; 
    padding-top: 100%; 
    float: left; 
} 

Ma vertical-align non funziona per il contenuto della cella. Come posso risolvere il problema?

HTML è:

<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> 
     <td>9</td> 
    </tr> 
</table> 

http://jsfiddle.net/FU84y/1/

Answer 1

Sostituire

float: left; 

con

display: inline-block; 
vertical-align: middle; 

Vedi http://jsfiddle.net/8jPT5/2/

Answer 2

è necessario rimuovere padding-top: 100%; a td: prima DEMO

HTML

<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> 
     <td>9</td> 
    </tr> 
</table> 

CSS

table { 
    width: 100%; 
    table-layout: fixed; 
} 
td { 
    text-align: center; 
    border: 1px solid #ececec; 
    height: 50px; 
} 
td:before { 
    content: ''; 
    float: left; 
} 

Answer 3

non avete bisogno di rimuovere l'imbottitura, è necessario dare la cella di una tabella di altezza.

table { 
width: 100%; 
table-layout: fixed; 
} 
td { 
text-align: center; 
vertical-align: middle; 
height: 40px; 

} 
td:before { 
content: ''; 
float: left; 
padding:100%; 
} 

vedi disegno fiddle