具有水平居中文本和 Firefox 中绝对定位文本的 div答案

【问题标题】：div with horizontal centered text and absolute positioned text in firefox具有水平居中文本和 Firefox 中绝对定位文本的 div
【发布时间】：2011-06-16 23:13:28
【问题描述】：

我使用表格和垂直对齐：中间构建了一个具有水平居中文本的 div。我在该 div 中添加了一个绝对定位的文本。

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

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

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

然后在firefox中打开，看到绝对定位的文字是根据整个屏幕而不是div里面的。

如果我删除表格，绝对定位的文本在 Firefox 中也可以，但我需要为水平文本居中找到另一种解决方案。

有什么创意可以解决这个问题吗？

10 倍

【问题讨论】：

标签： html css cross-browser

【解决方案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

【讨论】：

首先谢谢！，我一直在使用
在 showme( obj) func i 使用 obj.offsetTop、obj.offsetLeft 等现在具有不同值的值，这些值不代表其在屏幕上的位置。这位亲戚对此有何影响？
obj.offsetTop 将是树中具有position 的父元素的偏移量，如果没有找到它是窗口。现在不幸有了父母。
返回的偏移量现在确实为0。所以如果我想要这个div的顶部和左侧参数，有什么办法可以得到它们？
你可以做 obj.offsetTop + obj.offsetParent.offsetTop 但我建议你看看 jQuery 来完成这样的任务。

【解决方案2】：

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

【讨论】：

是的。父 .tweetclass 样式中有一个 position:relative。