Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

Sign in to follow this  
Melvins

Alinhar menus/lista ao centro de uma div

Recommended Posts

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

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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á.

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.