Html 居中子元素和工具提示，绝对定位，流体宽度相对于较小尺寸的父元素

我在做一种水平时间线

我面对的问题如下：

我无法将span.year定位到其父元素span.circle的中间

我无法将span.circle的工具提示也放置在此span.circle的中间

当然，我可以使用像素来实现这一点，但是span.year（1）和工具提示（2）的宽度可以是流动的，如示例所示

显示：无法使用span.circle的表格，因为它在css中是圆形。 如果我把span.year放在span.circle之后，并使用display:table来表示li.year，我会遇到页边距问题

实际上，关于span.year，它可以是li.year的孩子，而不是span.circle。那没关系，所以如果有更好的选择来选择父母的话，那就可以了

请在演示（JSFiddle/JSBin）中调整结果窗口的大小，以查看正确的结果

工具提示显示在小点（月）的悬停上

提前谢谢

HTML

演示：

---

当你不嵌套

span.圈
和
span.年
，但把它放在同一水平上时

<li class="year">
    <span class="year">1979-2012</span>
    <span class="circle"></span>
</li>

为了补偿工具提示，您必须添加一个
边距：4px
，然后将其从
：hover

li.year span.circle {
    display: block;
    margin: 4px auto;
}

li.year span.circle:hover {
    margin: 0 auto;
}

看到全部

<li class="year">
    <span class="year">1979-2012</span>
    <span class="circle"></span>
</li>

li.year span.circle {
    display: block;
    margin: 0 auto;
}

li.year span.year {
    display: block;
    margin: 0 auto;
}

li.year span.circle {
    display: block;
    margin: 4px auto;
}

li.year span.circle:hover {
    margin: 0 auto;
}