css - Centering Smaller Jquery Mobile HTML Custom Loading Spinner -

im using html custom loading widget in jquery mobile page. works it's default width. tried have smaller widget: 120px. 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 added css rule:

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

the widget resized. problem widget/spinner not in center anymore.

you need o play little bit css here:

this css block work:

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

you need adjust margin-left manually, once set fit every page. unfortunately here cant use standard margin-left: auto; , margin-right: auto; horizontally center div.