Logo Blog Pixwell

Web Design e outras coisas interessantes

Menu centralizado com tamanho variável

CSSComo centralizar uma lista de elementos sem definir o width para que tenha tamanho variável?

Montando um layout recentemente, me deparei com uma questão recorrente e decidi resolvê-la de uma vez por todas.

O que fazemos normalmente ao montar um menu?

Usamos a propriedade “float” para alinhar os itens <li> da lista, e depois o margin: auto no <ul> com um width definido para poder centralizá-lo, correto? Bom .. EU faço assim.  Mas como fariamos nos sistemas que criam menus dinâmicamente, como os CMS’s? Como fazer para que fique centralizado automaticamente?

Vejamos o seguinte código:

HTML


<ul class="main-menu">
    <li>Lorem </li>
    <li>Ipsum </li>
    <li>Dolor </li>
    <li>Sit amet</li>
    <li>Consectetuer </li>
    <li>Adipiscing</li>
</ul>

Obs.: <ul> é um elemento de bloco, portanto não precisamos usar uma <div> para manipulá-lo.

CSS


ul.main-menu{
list-style: none;
margin: 0 auto;
width: 550px;
}

ul.main-menu li{
border: 1px solid #CCC;
float: left;
font: 100% Verdana, Geneva, sans-serif;
padding: 2px 5px;
}

A propriedade “float” tem alguns erros e um deles é impedir que centralizemos o elemento pai, o <ul>,  sem definirmos uma largura fixa (width) para ele.

Solução:

Usamos o “display: inline” ao invés do “float” e o “text-align: center” no <ul>:


ul.main-menu{
list-style: none;
text-align: center
}

ul.main-menu li{
border: 1px solid #CCC;
display: inline;
font: 100% Verdana, Geneva, sans-serif;
padding: 2px 5px;
}

Testei nos principais navegadores, até no IE(ca) 6 funcionou, o resto do site ficou todo quebrado, mas o menu estava lá, centralizadinho hahahaha 😛

Claro que a solução acima tem seus prós e seus contras, por isso recomendo que leiam esse artigo e tirem suas próprias conclusões: Float vs. Inline-Block

Veja Também:   Como fazer um efeito realista de sombra no Photoshop