CSS：水平按钮的工具提示居中？

Question

我只是无法找到解决方法。 我有以下结构。这只是五个menupoints中的一个 - 通常这个ul中有五个<li>个项目。

<nav id="loggedInMenu">
    <ul role="navigation">
         <li>
            <a class="homeBtn" href="/my">
                <span class="homeBtnTooltip btn tt" title="Homepage">Homepage</span>
            </a>
         </li>
    </ul>
</nav>

正如你可以看到我的<a>我有一个span.tt作为工具提示。 我做了一个我的代码的实例...检查出来。 http://jsfiddle.net/Ngjzk/1/

通常情况下，tootlip是隐藏的，只有当我将鼠标悬停在绿色btn本身上时才显示。然而，这不是问题，这只是工作正常。

我根本不知道如何设法将工具提示本身集中在绿色btn下面。

所以现在你可以看到蓝色工具提示是在绿色btn下方最右边的方式。它应该在按钮下方的中心对齐。

我评论了我的小＆＃34; hack＆＃34;现在在css部分这样做。取消注释css中的最后几行，看看我的目标是什么。

但是我不想让这个奇怪的黑客并为每个具有负边距的工作点定位每个工具提示。特别是因为工具提示的文本是动态更改的，因此工具提示应始终具有文本的完整宽度，并在每个按钮下方的中央对齐。

知道如何这样做吗？

谢谢

Answer 1

编辑[推送到顶部的正确答案和此答案的历史记录]

好的，你必须使用双重位置;第一个（外跨距，position absolute; left: 50%）和第二个（内跨距，position relative; left: -50%）

http://jsfiddle.net/HerrSerker/Ngjzk/10/

---

原始
尝试“动态”百分比负边距 - 左

#menu .tt {
  text-align: center;
  position: absolute;
  top: 38px;
  margin-left: -50%;
}

---

修改
如果您可以重新排列HTML，请尝试span之外的a http://jsfiddle.net/HerrSerker/Ngjzk/5/

Answer 2

你可以使用:after或额外span

来实现

检查

http://jsfiddle.net/Ngjzk/11/

<强>更新：

http://jsfiddle.net/Ngjzk/14/