Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

Filipe_O

Centrar imagem activa de menu

Mensagens Recomendadas

Filipe_O

Boas!

Tenho um site em localhost, com um template.

Por defeito, esse template têm uma barra, que quando o link esta activo, mostra uma imagem.

No css, substitui a imagem por um quadrado. Ficou assim.

Mas eu queria que esse quadrado fosse mais pequeno.

E ao restringir a altura para 30px, fica assim.

Como queria que ficasse ao centro, experimentei margin... não deu pois, faz margem tanto ao fundo como ao item.

Experimentei por o background position como center, ou bottom, mas também nada...

Sabem-me ajudar?

Obrigado

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
XicoXperto

Como queria que ficasse ao centro, experimentei margin...

exprimenta dar-lhe um:

padding-top:15px;

parece-me que 15px, são capazes de resolver.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
XicoXperto

Esqueci-me de dizer,  pelo que eu sei, não é possivel através de CSS alinhar a meio em relação ao eixo yy (digamos a altura).

O "margin:auto;" alinha a meio em relação ao eixo dos xx, que é algo que não te interessa

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
Filipe_O

Pading não :S

Se fosse era margem, porque pading é em relação ao interior. Aumenta o espaço do limite inferior da caixa, até ao texto.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
Sergio S

O "margin:auto" também funciona em altura, o problema é que só funciona se a altura do elemento paterno estiver definida, e há browsers em que isso não é bem suportado.

Uma forma de fazer com que os elementos dentro de um elemento apareçam centrados verticalmente é usar "display:table-cell; vertical-align:middle;" nesse elemento. Com este código já não é necessário definir a altura, e os subelementos ficam centrados verticalmente. Note que, se não definir uma altura, não haverá margem, pelo que provavelmente quererá adicionar também "height:100%;", caso a altura não esteja definida de outra forma.

No entanto, e neste caso em particular, o problema nem está relacionado com o centrar, mas sim com o local que escolheu para limitar a altura. Em vez de aplicar esse "height:30px;" ao elemento "li", aplique-o ao "div" que o contém: #jsn-pos-mainmenu {height:30px;} .


Mais vale saber e não precisar, que precisar e não saber.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
Sergio S

Julguei que fosse essa a ideia. Então o objetivo é ficar com um botão centrado numa barra com a altura original, certo? Nesse caso, pelo que vejo na disposição da árvore, descubra qual o elemento paterno que está a determinar a altura total do menu (o meu palpite é que seja o #jsn-pos-mainmenu ou o #menu-mainmenu_1) e aplique-lhe o "display:table-cell; vertical-align:middle;", e depois aplique o "height:30px;" ao elemento imediatamente dentro dele.

Na eventualidade de a altura não estar a ser definida com uma height no elemento paterno, mas sim com um padding, remova essa definição e substitua-a por uma height. Se quiser manter uma estrutura dinâmica, pode usar a unidade em em vez de px.


Mais vale saber e não precisar, que precisar e não saber.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.