Centralizar Ícone no rodapé jQueryMobile

<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é -->

/code]

No CSS, tenho o seguinte código:

[code]
.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;
}