Alinhamento Menu em pagina responsiva

[Apenas Eu 13]

Ola!

Gostaria de saber se há alguma técnica para manter todos os elementos de um menu centralizados em uma pagina responsiva.

 

Por exemplo, isso deveria dar certo, mas comigo não tem funcionado:

li {
margin: 0 auto;
}

Daí como não consigo manter alinhado automaticamente eu faço tipo um alinhamento manual para cada resolução. Isso enche o saco. Além de não ficar perfeito, toda vez que altera alguma coisa no menu, um link que resolve por ou tirar, teria que reconfigurar todo o alinhamento.

 

Alias, para manter alinhado eu estou fazendo um improviso com uma margen-left com a imagem:

nav {
background:#575757;
}

nav li   {
float: left;
display: block;
height: 50px; 
width: 95px;
}
nav ul{
display:inline;
height: auto; 
margin-left:50px;
}

nav img {
float: left;
width: 11%;
padding: 10px 20px 0 0;
margin-left: 3.3em;
}

No caso eu só fiz um resumo do cód. porque ele é muito grande. Mas se for necessário eu posto ele inteiro.

 

Tem outro jeito além desse que fiz para manter todo o menu no centro da tela? Valeuu

[Electronic 124]

Não vi sua estrutura html mas ao inves de tentar alinha a LI alinhe o menu ou a DIV que ele pertence

nav {
  background:#575757;
  margin: 0 auto;
  width: DE UMA LARGURA fixa ou relativa
}

[Apenas Eu 13]

Ahh desculpe:

<nav class="clear-fix nav-total">
<ul >
<img src="imagens/logo.png" >
<li><a href="http://www.dcsdesenvolvimento.com.br/index.php"  >Início</a></li>
<li><a href="http://www.dcsdesenvolvimento.com.br/sobre-a-historia.php" >Sobre a</a></li>
<li><a href="http://www.dcsdesenvolvimento.com.br/servicos.php">Serviços</a></li>
<li><a href="http://www.dcsdesenvolvimento.com.br/artigos.php"  >Artigos</a></li>
<li><a href="http://www.dcsdesenvolvimento.com.br/clientes.php"  >Clientes</a></li>
<li><a href="http://www.dcsdesenvolvimento.com.br/portifolio.php" >Amostras</a></li>
<li ><a href="http://www.dcsdesenvolvimento.com.br/contato.php"  >Contato</a></li>
</ul>
<a href="#" id="pull">DCS</a>
</nav>

Na verdade eu não coloquei ela numa div, fiz direto na nav. A width dela seria 100%

Como eu imaginava, eu acho que ja tentei fazer um "margin: auto", como você sugeriu, mas não funcionou aqui.

 

Não fiz dentro duma DIV visando meio que a economia sabe? :)

[Electronic 124]

leia o de novo o que escrevi.

nav {
background:#575757;
margin: 0 auto;
width: DE UMA LARGURA fixa ou relativa
}

de uma largura pra ela que não seja 100%, pois se for 100% não faz sentido centralizar, ja que ela ocupa a tela toda

[Apenas Eu 13]

Ola....

Mas então, eu acho que eu entendi sim a sua sugestão, mas a ideia é que a lista que está dentro da nav fique centralizada, mas com ela ocupando a tela inteira, com o width 100%....

[angelorubin 142]

Veja se ajuda:

 

Css

html, body {
    padding: 0;
    margin: 0;
}    
#navbar {
    background: #575757;
    height: auto;
    overflow: hidden;
    padding: 10px;
    margin: 0 auto;
    font-family: Verdana;
    text-align: center;
}
#navbar li {
    display: inline-block;
}
#navbar li a {
    text-decoration: none;
    color: white;
    font-size: 15px;
    margin-right: 10px;
}

Html

<ul id="navbar">
  <li>
    <a href="http://www.dcsdesenvolvimento.com.br/index.php" >
      Início
    </a>
  </li>
  <li>
    <a href="http://www.dcsdesenvolvimento.com.br/sobre-a-historia.php">
      Sobre
    </a>
  </li>
  <li>
    <a href="http://www.dcsdesenvolvimento.com.br/servicos.php">
      Serviços
    </a>
  </li>
  <li>
    <a href="http://www.dcsdesenvolvimento.com.br/artigos.php" >
      Artigos
    </a>
  </li>
  <li>
    <a href="http://www.dcsdesenvolvimento.com.br/clientes.php" >
      Clientes
    </a>
  </li>
  <li>
    <a href="http://www.dcsdesenvolvimento.com.br/portifolio.php">
      Amostras
    </a>
  </li>
  <li>
    <a href="http://www.dcsdesenvolvimento.com.br/contato.php">
      Contato
    </a>
  </li>
</ul>

[grbruno 0]

Para este alinhamento você não deve utilizar a propriedade float, apenas o display: block ou display: inline-block, junto com margin: 0 auto.

EX.

nav ul{

width: 100%;

margin: 0;

Padding: 0;

}

 

nav ul li{

 

display: inline-block;

width: auto;

max-width: 200px;

height: auto;

margin: 0 auto;

 

}

 

 

Veja o funcionamento em meu site.

 

http://www.designatual.com.br