html - 如何在表格单元格内叠加 2 个 div

Question

我有以下代码:

<td class="mobile-user-icon">
    <span class="mobile-photo">background text</span>
    <span class="mobile-caller-mute">overlay text</span>
</td>

.mobile-user-icon {
    width: 64px;
    height: 64px;
    text-align: center;
    background: grey;
    color: white;
    vertical-align:middle;
}

我想在 mobile-photo 上覆盖 mobile-caller，同时为 2 个文本元素保持 vertical-align:middle。

我知道如果这不在表格中，通常的做法是将父 mobile-user-icon 设置为 position:relative，然后然后 position:absolute 两个具有相同绝对位置的子元素。

但是，这在 table-cell 中不起作用。有什么想法吗？

JS fiddle :http://jsfiddle.net/mFNed/1/

Answer 1

你应该添加一个相对位置到.mobile-user-icon :

.mobile-user-icon {
    width: 64px;
    height: 64px;
    text-align: center;
    background: grey;
    color: white;
    vertical-align: middle;
    position: relative;
}

由于表格单元格的高度是固定的，因此可以轻松使用 CSS line-height保持垂直对齐的选项。为 <span> 设置以下 CSS里面的元素.mobile-user-icon :

.mobile-user-icon > span {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    vertical-align: middle;
    line-height: 64px;
}   

jsFiddle Demo