如何将跨度居中于表格单元格中的图像

Question

目标是执行以下操作，其中蓝色recatngles是具有固定大小的图像，“单词”以这些图像为中心：

要使用表执行此操作，我似乎需要将 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>

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

---

有效的解决方案（固定尺寸），感谢以下评论：

</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;
}

关键是设置父亲，亲子绝对。绝对应该将其从布局中删除，并将其相对于最近的父对象定位。