Como centralizo o menu horizontal <UL>?

148

Preciso centralizar o alinhamento de um menu horizontal.
Eu tentei várias soluções, incluindo a combinação de inline-block/ block/ center-alignetc., mas não consegui.

Aqui está o meu código:

<div class="topmenu-design">
    <!-- Top menu content: START -->
    <ul id="topmenu firstlevel">                                                                                       
      <li class="firstli" id="node_id_64"><div><a href="#"><span>Om kampanjen</span></a></div></li>
      <li id="node_id_65"><div><a href="#"><span>Fakta om inneklima</span></a></div></li>
      <li class="lastli" id="node_id_66"><div><a href="#"><span>Statistikk</span></a></div></li>
    </ul>
    <!-- Top menu content: END -->
</div>

ATUALIZAR

Eu sei como centralizar o alinhamento uldentro do div. Isso pode ser feito usando a sugestão de Sarfraz. Mas os itens da lista ainda estão flutuando à esquerda no ul.

Preciso de Javascript para fazer isso?

Steven
fonte
Centralizar o texto em cada LI ou centralizar o UL no DIV?
Joop

Respostas:

130

Em http://pmob.co.uk/pob/centred-float.htm :

A premissa é simples e basicamente envolve apenas um invólucro flutuante sem largura que é flutuado para a esquerda e depois deslocado da tela para a posição de largura esquerda: relativa; esquerda: -50%. Em seguida, o elemento interno aninhado é revertido e uma posição relativa de + 50% é aplicada. Isso tem o efeito de colocar o elemento morto no centro. O posicionamento relativo mantém o fluxo e permite que outro conteúdo flua por baixo.

Código

#buttons{
    float:right;
    position:relative;
    left:-50%;
    text-align:left;
}
#buttons ul{
    list-style:none;
    position:relative;
    left:50%;
}

#buttons li{float:left;position:relative;}/* ie needs position:relative here*/

#buttons a{
    text-decoration:none;
    margin:10px;
    background:red;
    float:left;
    border:2px outset blue;
    color:#fff;
    padding:2px 5px;
    text-align:center;
    white-space:nowrap;
}
#buttons a:hover{ border:2px inset blue;color:red;background:#f2f2f2;}
#content{overflow:hidden}/* hide horizontal scrollbar*/
<div id="buttons">
    <ul>
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2's a bit longer</a></li>
        <li><a href="#">Butt 3</a></li>
        <li><a href="#">Button 4</a></li>
    </ul>
</div>

reisio
fonte
9
Você poderia adicionar algum código ou contexto a esta resposta para evitar a podridão do link?
Nightfirecat
A solução funciona muito bem e lamento perguntar isso depois de tanto tempo, mas e se eu tiver um CSS suspenso? Não posso usar o estouro: oculto nos pais então. Mas ainda vai estourar como aqui: homeafrika.com .
Samia Ruponti 28/03
Na verdade, não vejo nenhum estouro nesse site. Não tenho certeza se você precisa do estouro: oculto; de qualquer maneira, embora, como se trata de um estouro horizontal, você sempre pode tentar overflow-x: hidden; em vez de. webchat.freenode.net/?nick=oerflowono&channels=#websites para assistência em tempo real.
reisio 28/03
1
A solução centraliza bem o menu, mas se você tiver submenus que devem abrir em uma determinada posição fixa ao passar o mouse, estará condenado, pois o position: relativemenu principal altera o comportamento do position:absolutesubmenu.
Ceviske
1
@reisio Onde há #buttonsid na pergunta do OP? Onde há aviso, em sua resposta, de que ele precisa usá-lo? Como isso pode ser aceito e ter a resposta mais votada, se você realmente não está respondendo à pergunta, citando apenas algum blá-blá fora de tópico em algum link?
Trejder
90

Isso funciona para mim. Se eu não entendi mal sua pergunta, você pode tentar.

    div#centerDiv {
        width: 100%;
        text-align: center;
        border: 1px solid red;
    }
    ul.centerUL {
        margin: 2px auto;
        line-height: 1.4;
        padding-left: 0;
    }
    .centerUL li {
        display: inline;
        text-align: center;
    }
<div id="centerDiv">
    <ul class="centerUL">
        <li><a href="http://www.amazon.com">Amazon 1</a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com">Amazon 2</a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com">Amazon 3</a></li>
    </ul>
</div>

Robusto
fonte
2
concorde com @cweiske. Simplesmente usando um text-align: center na div contendo resolveu o problema para mim
Kim Stacks
Você só precisa se certificar de qualquer texto do interior recebe umtext-align: left;
Juan Mendes
Isso é adorável! Mas, o ul tem preenchimento padrão à esquerda, o que significa que o menu é deslocado à direita do centro. Você precisará remover o preenchimento padrão da ul com padding-left: 0;
Iterative Gypsy
1
Perfeitamente uma resposta melhor do que a solução aceita, o uso da tela: inline faz o truque. não use float, é muito complicado. Obrigado pelas informações @Robusto
Clain Dsilva
Centro text-align em li é desnecessário
Aminah Nuraini
75

Com CSS3 flexbox. Simples.

ul {
  display: flex;
  justify-content: center;
}

ul li {
  padding: 0 8px;
}
Daishi Nakajima
fonte
6
Eu recomendaria definitivamente este método
caras
1
Eu também recomendaria esse método sobre a resposta escolhida.
precisa saber é o seguinte
Eu possuo uma cerveja para você!
Suyash Dixit 16/09/16
Eu diria que nunca usei o flex antes nem justifique o conteúdo. Resposta excelente
Gman
Ótima resposta beero
Ilyas karim
20

Esta é a maneira mais simples que encontrei. Eu usei o seu html. O preenchimento é apenas para redefinir os padrões do navegador.

ul {
  text-align: center;
  padding: 0;
}
li {
  display: inline-block;
}
<div class="topmenu-design">
  <!-- Top menu content: START -->
  <ul id="topmenu firstlevel">
    <li class="firstli" id="node_id_64">
      <div><a href="#"><span>Om kampanjen</span></a>
      </div>
    </li>
    <li id="node_id_65">
      <div><a href="#"><span>Fakta om inneklima</span></a>
      </div>
    </li>
    <li class="lastli" id="node_id_66">
      <div><a href="#"><span>Statistikk</span></a>
      </div>
    </li>
  </ul>
  <!-- Top menu content: END -->
</div>

Shawin
fonte
2

Tente o seguinte:

div.topmenu-design ul
{
  display:block;
  width:600px; /* or whatever width value */
  margin:0px auto;
}
Sarfraz
fonte
1
Isso funciona para centralizar o UL. Mas o <LI> ainda está flutuando à esquerda. Eu quero que o <LI> seja centralizado dentro do <UL>. É possível?
19410 Steven
2

Faça isso deste modo :

   <div id="footer">
        <ul>
            <li><a href="/1.html">Link 1</a></li>
            <li><a href="/2.html">Link 2</a></li>
            <li><a href="/3.html">Link 3</a></li>
            <li><a href="/4.html">Link 4</a></li>
            <li><a href="/5.html">Link 5</a></li>
        </ul>
   </div>

E o CSS:

#footer {
    background-color:#ccc;
    height:39px;
    line-height:36px;
    margin:0 auto;
    text-align:center;
    width:950px;
}

#footer ul li {
    display:inline;
    font-family:Arial,sans-serif;
    font-size:1em;
    padding:0 2px;
    text-decoration:none;
}
Boris Guéry
fonte
2

Como muitos de vocês, estou lutando com isso há um tempo. A solução finalmente teve a ver com o div que contém o UL. Todas as sugestões sobre alteração de preenchimento, largura etc. do UL não tiveram efeito, mas o seguinte ocorreu.

É tudo sobre o margin:0 auto;na div contendo. Espero que isso ajude algumas pessoas, e obrigado a todos que já sugeriram isso em combinação com outras coisas.

.divNav
{
    width: 99%;
    text-align:center;
    margin:0 auto; 
}

.divNav ul
{ 
    display:inline-block; 
    list-style:none;
    zoom: 1;
}

.divNav ul li 
{
    float:left;
    margin-right: .8em;       
    padding: 0; 
}

.divNav a,  #divNav a:visited
{
    width: 7.5em;
    display: block; 
    border: 1px solid #000;
    border-bottom:none;
    padding: 5px; 
    background-color:#F90;
    text-decoration: none;
    color:#FFF;
    text-align: center;
    font-family:Verdana, Geneva, sans-serif;
    font-size:1em;
}
Neal Ganslaw
fonte
2

Demo - http://codepen.io/grantex/pen/InLmJ

<div class="navigation">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">Menu</a></li>
        <li><a href="">Others</a></li>
    </ul>
</div>


.navigation {
    max-width: 700px;
    margin: 0 auto;
}
.navigation ul {
    list-style: none;
    display: table;
    width: 100%;
}
.navigation ul li {
    display: table-cell;
    text-align: center;
}
.navigation ul li a {
    padding: 5px 10px;
    width: 100%;
}

Omg muito mais limpo.

grantex
fonte
1

De um modo geral, a maneira de centralizar um elemento de nível de preto (como a <ul>) é usar a margin:auto;propriedade

Para alinhar elementos de nível de texto e de linha dentro de um elemento de nível de bloco, use text-align:center;. Então, todos juntos algo como ...

ul {
    margin:auto;
}
ul li {
    text-align:center;
    list-style-position:inside; /* so that the bullet points are also centered */
}
ul li div {
    display:inline; /* so that the bullet points aren't above the content */
}

... Deveria trabalhar.

O caso adicional é o Internet Explorer6 ... ou mesmo outros IEs quando não estiver usando um <!DOCTYPE>. O IE6 alinha incorretamente os elemnts no nível do bloco usando text-align. Portanto, se você deseja oferecer suporte ao IE6 (ou não está usando a <!DOCTYPE>), sua solução completa é ...

div.topmenu-design {
    text-align:center;
}
div.topmenu-design ul {
    margin:auto;
}
div.topmenu-design ul li {
    text-align:center;
    list-style-position:inside; /* so that the bullet points are also centered */
}
div.topmenu-design ul li div {
    display:inline; /* so that the bullet points aren't above the content */
}

Como nota de rodapé, acho id="topmenu firstlevel"inválido, pois um idatributo não pode conter espaços ...? Na verdade, a recomendação do w3c define o idatributo como um tipo de 'nome' ...

Os tokens de ID e NAME devem começar com uma letra ([A-Za-z]) e podem ser seguidos por qualquer número de letras, dígitos ([0-9]), hífens ("-"), sublinhados ("_") , dois pontos (":") e pontos (".").

Richard JP Le Guen
fonte
1

Usei a propriedade display: inline-block: a solução consiste em usar um invólucro com largura fixa. No interior, o bloco ul com o bloco embutido para exibição. Usando isso, o ul apenas assume a largura do conteúdo real! e finalmente margem: 0 auto, para centralizar este bloco inline =)

/*ul wrapper*/
.gallery_wrapper{
        width:          958px;
        margin:         0 auto;
  }
/*ul list*/
ul.gallery_carrousel{
        display:        inline-block;
        margin:         0 auto;
}
.contenido_secundario li{
        float:          left;
}
David
fonte
0

Eu uso o código jquery para isso. (Solução alternativa)

    $(document).ready(function() { 
       var margin = $(".topmenu-design").width()-$("#topmenu").width();
       $("#topmenu").css('margin-left',margin/2);
    });
nixis
fonte
0
div {
     text-align: center;
}
div ul {
     display: inline-table;
}

ul como tabela em linha corrige o problema com. Eu usei a div pai para alinhar o texto ao centro. desta forma, fica bem mesmo em outras línguas (tradução, largura diferente)

ruifn
fonte
0

A solução de @ Robusto foi a mais simples para o que eu estava tentando fazer, sugiro que você a use. Eu estava tentando fazer o mesmo com as imagens em uma lista não ordenada para fazer uma galeria ... Eu fiz um violão para brincar com ela. Sinta-se livre para experimentá-lo aqui.

[foi configurado usando o código de exemplo de robusto]
HTML:

<div id="centerDiv">
    <ul class="centerUL">
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150>         </a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a></li>
    </ul>
</div>


CSS:

div#centerDiv {
    width: 700px;
    text-align: center;
    border: 1px solid red;
}
ul.centerUL {
    margin: 2px auto;
    line-height: 1.4;
}
.centerUL li {
    display: inline;
    text-align: center;
}
xanderoid
fonte
0
ul{margin-left:33%}

É uma aproximação decente em telões. Não é bom, mas uma boa solução suja.

Jon
fonte
-2
.topmenu-design
{
    display: inline-table;
}

Isso tudo!

Сатанист Васькин
fonte