Question

我使用这种结构来获得方形单元格的表格：

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

但是vertical-align不适用于单元格的内容。我该如何解决这个问题？

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

替换

float: left;

与

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

请参阅http://jsfiddle.net/8jPT5/2/

Answer 2

您需要先将padding-top: 100%;移至td：之前 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

您不需要移除填充，您需要为表格单元格提供高度。

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

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

请参阅fiddle示例

td：before和vertical-align：middle

3 个答案: