中心较小的Jquery移动HTML自定义加载微调器

Question

我在Jquery Mobile Page中使用HTML自定义加载小部件。它与默认宽度完美配合。但我尝试使用更小的小部件：120px。所以我有：

//custom HTML loading widget
$(document).on('mobileinit', function(){
    $.mobile.loader.prototype.options.text = 'Custom Loader';
    $.mobile.loader.prototype.options.textVisible = true;
    $.mobile.loader.prototype.options.textonly = true;
    $.mobile.loader.prototype.options.theme = 'a';
    $.mobile.loader.prototype.options.html = '<span class="ui-bar ui-overlay-c ui-corner-all" style="width:120px;"><img src="logo.png" width="120px;"/><h2>loading...</h2></span>';
});

我还添加了CSS规则：

.ui-loader-verbose {
    width: 120px;
}

小部件已正确调整大小。问题是小部件/微调器不再位于中心。

Answer 1

你需要在这里玩一点css：

这个css块可以工作：

.ui-loader-verbose {
    width: 120px;
    margin-left: -50px;
}

您只需手动调整左边距，但一旦设置，它将适合每一页。不幸的是，我们不能使用标准margin-left：auto;和保证金权利：auto;横向居中div。