添加更多幻燈片後，Nivo滑塊子彈「不居中」

Question

我在我的WordPress和vBulletin中使用Nivo滑塊和Iframe。但是當我添加更多幻燈片時，導航子彈轉向右側，並且不再居中。 我只知道關於CSS一個沒有jQuery。我怎麼解決這個問題 ？

截圖：http://up.vbiran.ir/images/e7r4xxdp09ms0bafb4f.jpg

Answer 1

看一看爲主題的CSS文件。默認的將是themes/default/default.css。

找到這個做，因爲它說：

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

Answer 2

上述解決方案可以在情況下，問題，如果您使用的是基於默認的主題滑塊多個實例中的頁面。
可能的解決方案：
1>將nivo-controlNav類添加爲您正在更改的滑塊的標識。 例如：如果你有一個ID nivoSlider123滑塊，你應該重寫利潤率：

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

現在你可以調整的數值區間左，而不影響其他滑塊。

2>使用更廣​​義的CSS代碼：

.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; 
} 

希望這有助於。