Nivo Slider Bullets "are not centered" after adding more Slides

i'm using Nivo Slider in my Wordpress and vBulletin with a Iframe . but when i added more slides the navigation bullets turned to the right , and are not centered anymore. i just know about CSS an NO jquery. how can i solve this problem ?

ScreenShot : http://up.vbiran.ir/images/e7r4xxdp09开发者_运维知识库ms0bafb4f.jpg

---

The above solution can be a issue in case if you are using multiple instance of default theme based sliders in a page.
Possible solutions:
1> Prefix the nivo-controlNav class with the id of slider that you're changing. eg: If you have a slider with id nivoSlider123, you should override the margins as:

jQuery('div#nivoSlider123 .nivo-controlNav').css('position:absolute;left:50%;bottom:-42px;margin-left:-40px;');

Now you can adjust the value of margin-left without effecting the other sliders.

2> Using more generalized css code:

.theme-default .nivo-controlNav {
    position:absolute;
    bottom:-42px;
    /*left:50%; margin-left:-40px;*/ /* Tweak this to center bullets */
    width:100%;text-align:center;
}
.theme-default .nivo-controlNav a {
    /*display:block;width:22px;height:22px;background:url(bullets.png) no-repeat;text-indent:-9999px;border:0;margin-right:3px;float:left;*/
    display:inline-block !important; width:22px; height:22px; background:url(bullets.png) no-repeat; text-indent:-9999px; border:0; margin-right:3px;
}

Hope this helps.

---

Have a look at the css file for the theme. The default one will be themes/default/default.css.

Find this and do as it says:

.theme-default .nivo-controlNav {
    position:absolute;
    left:50%;
    bottom:-42px;
    margin-left:-40px; /* Tweak this to center bullets */
}