0

我正在尝试使用 CSS 和 jQuery 将绝对定位的对象水平居中。jQuery 是必要的，因为对象具有不同的宽度。将鼠标悬停在我的 jsFiddle 中的图标上，看看我的意思。

jsFiddle在这里

现在我left: 50%应用了一个属性，但我需要做一个负数margin-left，即对象宽度的一半。这是我的代码，不知道为什么它不起作用：

jQuery

$('.tooltip').each(function() {
      $(this).css('margin-left', '-'+($(this).width() / 2)+'px');
}​

CSS

.toolbar .tooltip {
    position: absolute;
    left: 50%;
    margin-top: 8px;
    padding: 3px 8px;
    display: none;
}

.toolbar li:hover .tooltip {
    display: block;
}

HTML

<ul class="toolbar">
    <li><img alt="Undo" src="undo.gif" /><span class="tooltip">Undo</span></li>
    <li><img alt="Redo" src="redo.gif" /><span class="tooltip">Redo</span></li>
    <li><img alt="Help" src="help.gif" /><span class="tooltip">Help</span></li>
    <li><img alt="Feedback" src="feedback.gif" /><span class="tooltip">Feedback</span</li>
</ul>
4

2 回答 2

4

未封闭代码错误，这里更新代码

顺便说一句，它有填充，所以你应该使用“outerWidth”而不是“width”。你可以在这里更正代码

于 2012-04-28T20:56:37.227 回答
1

根据块的宽度，我进行了left相应的设置。

$('.tooltip').each(function() {
    // Assuming button block width is 32px.
    $(this).css('left', (32 - ($(this).width())) / 2+'px');
}​);​

http://jsfiddle.net/3Cb9A/3/

于 2012-04-28T21:02:15.393 回答