Centralizar Ícone no rodapé jQueryMobile

Olá a todos os membros deste fórum, estou iniciando em jQuery mobile, gostaria de saber como centralizar os ícones dentro do rodapé. Estou usando ícones personalizados, que no html está com o seguinte código:
   <div data-role="footer" data-position="fixed"><!-- footer - Início do Rodapé -->
	<div data-role="navbar">

	<ul>
		<li><a href="index.html" data-icon="meuIcone1">Home</a></li>
		<li><a href="filmes.html" data-icon="meuIcone2" class="ui-btn-active">Filmes</a></li>
                <li><a href="teatros.html" data-icon="meuIcone3">Peças de Teatro</a></li>
	</ul>
        </div>
</div><!-- /footer  - Fim do Rodapé -->

No CSS, tenho o seguinte código:

.ui-icon-meuIcone1 {
	background: url(../imagens/house.png) no-repeat rgba(0, 0, 0, 0.4) !important;
}
.ui-icon-meuIcone2 {
    background: url(../imagens/widescreen.png) no-repeat rgba(0, 0, 0, 0.4) !important;    
}
.ui-icon-meuIcone3 {
    background: url(../imagens/tags.png) no-repeat rgba(0, 0, 0, 0.4) !important;
}

As imagens aparecem, mas estão alinhadas a esquerda. Como faço para alinhar centralizada. Obrigado de antemão a todos que possam colaborar.

Da uma olhada nestes demos Icons/Demo JQM1.4.5, em View Source tem o código com as classes necessárias para formatar os elementos. Trabalhei com JQM, mas o projeto esta morto à uns 3 anos, já que a última atualização foi praticamente maquiagem. Se você estudava outro framework, com desenvolvimento ativo.