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-caller上叠加mobile-photo，同时为2个文本元素保留vertical-align:middle。

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

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

JS小提琴：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>中的.mobile-user-icon元素设置以下CSS：

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

jsFiddle Demo

Answer 2

为你的单元格添加一个float：left样式应该可以。

检查以下链接我已经更新了你的小提琴。

http://jsfiddle.net/mFNed/5/

.mobile-caller-mute {
    float:left;    
}

如何在表格单元格中叠加2个div

2 个答案: