I'm trying to horizontally center an absolute positioned object with CSS and jQuery. The jQuery is necessary because the objects have varying widths. Mouse over the icons in my jsFiddle to see what I mean.

[jsFiddle here](http://jsfiddle.net/3Cb9A/)

Right now I have a `left: 50%` property applied, but I need to do a negative `margin-left` that is half of the object's width. This is my code, not sure why it's not working:

**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>

```