html - 如何将表格单元格中的图像居中

Question

目标是执行以下操作，其中蓝色矩形是固定大小的图像，“单词”位于这些图像的中心:

要用 table 做到这一点，我似乎需要将 td 和 span 位置设置为绝对位置，然后是下一个单元格('text cell') 与第一个重叠，尝试将其位置设置为 relative 无效。设置 'left' 也没有效果 ...

这是我尝试过的解决方案:

<style>
    #column0 {
        position: absolute;
        text-align: center;
        vertical-align: middle;
        line-height: 50px;
    }
    #column0 span {
        position: absolute;
        left: 0;
        width: 100%;
    }
    #column1 {
        position: relative;
    }
</style>

<table>
    <tr><td id="column0"><img .../><span>word</span></td><td id="column1">text cell</td></tr>
</table>

你会怎么做？我需要忘记 table 吗？

---

有效的解决方案(固定大小)，感谢以下评论:

</style>
    #column0 {
        display:inline-block;
        width: 50px;
        height: 50px;
        background-image: url(...);
        text-align: center;
        vertical-align: middle;
        line-height: 50px;
    }
    #column1 {
        display:inline-block;
    }
</style>
<div>
    <div id="column0">word</div><div id="column1">text cell</div>
</div>

Answer 1

尝试:

#column0 {
    position: relative; /* should keep it in the layout */
}
#column0 span {
    position: absolute; /* should rip it out of the layout */
    top: 15px; /* just a wild guess here */
    left: 15px;
}

关键是设置父亲属和子绝对。 Absolute 应该将其从布局中剥离出来，并相对于最近的定位父级进行定位。