使用 jQuery 和 CSS 居中对象

Center object with jQuery and CSS

本文关键字：对象 CSS jQuery 使用      更新时间：2023-09-26

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

js小提琴在这里

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

关闭的代码错误，在此处更新代码

顺便说一下，它有填充，所以你应该使用"outerWidth"而不是"width"。您可以在此处更正代码

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

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

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

相关文章：