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.