td: przed i vertical-align: middle

Question

używam tej konstrukcji, aby dostać stolik z komórek kwadratowych:

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

Ale vertical-align nie działa dla zawartości komórki. Jak mogę to naprawić?

html jest:

<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

Wymień

float: left; 

z

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

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

Answer 2

trzeba usunąć padding-top: 100%; do TD: przed 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

Nie trzeba usunąć wyściółkę, trzeba nadać komórce tabeli wysokość.

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

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

patrz przykład fiddle