div中包含水平居中文本和firefox中的绝对定位文本

Question

我使用table和vertical-align：middle构建了一个具有水平居中文本的div。 我在div中添加了一个绝对定位的文本。

它适用于chrome，但不适用于Firefox。

您可以在此处查看代码及其工作原理。 http://jsfiddle.net/TUwAy/8/

只需用chrome打开它，然后查看居中的\绝对定位文本。

然后在firefox中打开它，看到绝对定位文本是根据整个屏幕而不是div内部。

如果我删除了表格，那么绝对定位的文本在firefox中也可以，但是我需要找到另一个水平文本居中的解决方案。

如何解决这个问题的任何创意？

10倍

Answer 1

将display: table与position: relative结合使用似乎是一个问题。

如何将absText从“表格”中删除？

<div class='clickable' id='wrapperID'>
    <div class='tweetclass'>
        <p> horizontal centered text</p>
    </div>
    <div class='absText'>
        <div id='hid'>abs position text</div>
    </div>
</div>

.absText{
    font-size:10px;
    color:#878787;
    font-weight:100;
    position:absolute;
    bottom:7px;
    right:7px;
}

.clickable{
    cursor:pointer;
    position: relative;
}

jsfiddle

Answer 2

如果您希望元素相对于其父元素绝对定位，则其父元素的位置必须设置为relative。