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

Melvins

Alinhar menus/lista ao centro de uma div

Mensagens Recomendadas

Melvins

Olá! Estou com um problema que não consigo perceber ao tentar alinhar menus (através de uma lista horizontal) ao centro.

A ideia é colocar um menu através de lista ao centro dentro de uma div, do género:

<div id="ex1">
   <ul id="ex2">
         <li>...
          ....</li>
   </ul>
</div>

O que tentei depois fazer foi meter no identificador "ul#ex2" um "position: relative" e um "float: left". tudo ok, menu na horizontal como pretendido. Agora, tentei colocar ao centro com um "text-align: center" no identificador "#ex1" que não resultou, tentei depois já outra vez no identificador da lista meter um "margin:0 auto" para tentar alinhar ao centro da div. Não resultou, nem no WYSIWYG do Dreamweaver nem no servidor.

Tentei depois alterar/inserir o "display" para "inline", fiz várias tentativas com display no block combinado com margins auto, float, etc... Não consegui meter ao centro.

Alguém pode dar alguma ajuda?

Obrigado desde já.  :D

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
NCS_One

Boas.

Assim centra na horizontal :

#menupar
{
  width: 300px;
  height: 300px;
  background-color: yellow;
}
#menu
{
  text-align: center;
}

<div id="menupar">
  <ul id="menu">
    <li>123</li>
    <li>123</li>
    <li>123</li>
  </ul>
</div>


Se a vida te voltar as costas aproveita e apalpa-lhe o cu.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
Melvins

Desculpa, mas esse menu é um menu com lista em vertical, não é?

Tipo:

link 1

link2

link3

link4

É que eu tenho na horizontal:

link 1 link 2 link 3

Possivelmente, estará a entrar em choque com outros atributos, mas não consigo descobrir. Mas isso já tentei e não dá.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
Demoins

Não resulta dessa maneira... tenta o seguinte:

<div id="ex1">
   <ul id="ex2">
         <li>Teste 1</li>
         <li>Teste 2</li>
   </ul>
</div>

#ex1 {
     width: 1000px; /* aqui metes o tamanho do menu, eu pus um exemplor  */
     height: auto;
     overflow: hidden;
}

#ex2 {
    width: 300px; /*aqui tens de meter sempre um valor para que depois possas alinhá-lo. */
/* esquece o valor auto porque não funciona.*/
/*Apenas troca por um valor mais pequeno que o objecto parente (neste caso o parente é o #ex1)*/
   height: auto;
   margin: auto; /* esta propriedade aqui com o valor auto é que vai alinhar ao centro xD */
}

Penso que assim deves conseguir.

Cumprimentos

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.