td：之前和垂直对齐：中间答案

【问题标题】：td:before and vertical-align:middletd：之前和垂直对齐：中间
【发布时间】：2014-07-27 08:42:29
【问题描述】：

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

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

但垂直对齐不适用于单元格的内容。我该如何解决？

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/

【问题讨论】：

把你的代码放到 Fiddle 上供我们测试
您正在添加导致问题的 padding-top:100%。

标签： html css html-table vertical-alignment

【解决方案1】：

您需要删除 padding-top: 100%; 到 td:before 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;
}

【讨论】：

【解决方案2】：

替换

float: left;

与

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

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

【讨论】：

很好，不知道:)
不错，但仅适用于单行内容。 fiddle..
如果单元格包含其他元素则不起作用http://jsfiddle.net/eNFDS/
@Mr_Green - 正确。但这不是问题的一部分。我们可以添加对多行的支持，但我们需要添加一个包装器元素。见jsfiddle.net/8jPT5/4
@user3713915：我编辑了我的解决方案以考虑到这一点。检查。

【解决方案3】：

你不需要删除填充，你需要给表格单元格一个高度。

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

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

查看fiddle 示例

【讨论】：