Multiple Sliders with Centered Navigation Bullets

Hi, I have multiple sliders on my page that have varrying amount of images, and I want the bullets centered under the image, but everything I've tried to do has been unsuccessful. I also need it to be able to update the width dynamicaly so I don't have to set a width on the wrapper, as my client will be updating this. Currently my HTML looks like this:

 <div class="slider-head">Q2 - 2012</div>
 <div id="slider1">
        <img src="../Images/small-1.jpg" alt="Caption for slide 1" />
        <img src="../Images/small-1.jpg" />
        <a href="http://www.menucool.com"><img src="../Images/small-1.jpg" /></a>
        <img src="../Images/small-1.jpg" />
        <img src="../Images/small-1.jpg" alt="Caption for slide 5" />
    </div>
    <div style="width:10px; height:25px;"></div>
    <div class="slider-head">Q2 - 2012</div>
 <div id="slider2">
        <img src="../Images/small-1.jpg" alt="Caption for slide 1" />
        <img src="../Images/small-1.jpg" />
        <a href="http://www.menucool.com"><img src="../Images/small-1.jpg" /></a>
        <img src="../Images/small-1.jpg" />
        <img src="../Images/small-1.jpg" alt="Caption for slide 5" />
        <img src="../Images/small-1.jpg" alt="Caption for slide 5" />
        <img src="../Images/small-1.jpg" alt="Caption for slide 5" />
    </div>

 and my css for the wrapper/bullets looks like this:

div.navBulletsWrapper  {
 top:160px; /* Its position is relative to the top of the slider*/
 background:none;
 position:relative;
 z-index:5;
 cursor:pointer;
}

/* each bullet */
div.navBulletsWrapper div
{
    width:11px; height:11px;
    background:transparent url(bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}