javascript - 使用 jQuery 和 CSS 居中对象

Question

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

jsFiddle here

现在我应用了一个 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>

Answer 1

未关闭代码错误，更新代码here

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