5

Não estou conseguindo centralizar o elemento <nav>

HTML:

<nav class="menu">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="#">Responsive</a></li>
        <li><a href="#">Responsive</a></li>
        <li><a href="#">Responsive</a></li>
    </ul>
</nav>

CSS:

.menu {position: fixed; top: 0; width: 100%;}
.menu ul {font-size: 15px; margin: 0 auto; }
.menu ul li {display: inline; }
.menu ul li a {margin: 0 auto;}

Imagem: nav

6
  • 1
    Podes colocar o teu código? Commented 6/05/2014 às 16:35
  • 1
    Favor postar html e css para ajuda
    – Otto
    Commented 6/05/2014 às 16:36
  • Tenta também explicar melhor a questão, o que fizeste e qual está a ser o problema.
    – Jorge B.
    Commented 6/05/2014 às 16:39
  • 1
    Editei o post com o meu código.
    – Lucas
    Commented 6/05/2014 às 16:40
  • Consegues por uma imagem do teu nav?
    – Jorge B.
    Commented 6/05/2014 às 16:44

1 Resposta 1

9

Um simples text-align:center; no seletor .menu ul deve resolver.

Então o CSS ficaria assim:

.menu {position: fixed; top: 0; width: 100%;}
/* ↓ eu só subistitui o margin por text-align:center na linha abaixo ↓ */
.menu ul {font-size: 15px; text-align:center; }
.menu ul li {display: inline; }
.menu ul li a {margin: 0 auto;}

Exemplo:

FIDDLE

3
  • Obrigado. Funcionou!
    – Lucas
    Commented 6/05/2014 às 16:56
  • Mais rápido que eu, ein! Haha. Commented 6/05/2014 às 16:59
  • 2
    Valeu @GuilhermeOderdenge , estava vendo seu perfil e a URL do seu site está com um erro de digitação (.cmo ao inves de .com), só um toque. :)
    – Kazzkiq
    Commented 6/05/2014 às 17:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .