Centering Smaller Jquery Mobile HTML Custom Loading Spinner

Question

Im using HTML Custom loading widget in my Jquery Mobile Page. It works perfectly with it's default width. But I tried to have a smaller widget: 120px. So I have:

//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>';
});

I also added CSS rule:

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

The widget was properly resized. The problem is that the widget/spinner is not in the center anymore.

Answer 1

You will need o play a little bit with css here:

This css block will work:

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

You will only need to adjust margin-left manually, but once set it will fit every page. Unfortunately here we cant use standard margin-left: auto; and margin-right: auto; to horizontally center div.