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

Posted 2023-03-05

【中文标题】td：之前和垂直对齐：中间

【英文标题】：td:before and vertical-align:middle

【发布时间】：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%。

【参考方案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 示例