Центрирование меньшего Jquery Mobile HTML Пользовательская загрузка Spinner

Question

Я использую пользовательский виджет загрузки HTML на моей мобильной странице Jquery. Он отлично работает с шириной по умолчанию. Но я попытался иметь меньший виджет: 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; и поле справа: авто; горизонтально центрировать дел.