Como posso centralizar <ul> <li> em div

88

Como posso centralizar uma lista não ordenada <li>em uma largura fixa div?

<table width="100%">
  <tbody>
  <tr>
    <td width="41%"><img src="/web/20100104192317im_/http://www.studioteknik.com/html2/html/images/hors-service.jpg" width="400" height="424"></td>
    <td width="59%"><p align="left">&nbsp;</p>
      <h1 align="left">StudioTeknik.com</h1>
      <p><br align="left">
        <strong>Marc-André Ménard</strong></p>
      <ul>
        <li>Photographie digitale</li>
        <li>Infographie </li>
        <li>Débug et IT (MAC et PC)</li>
        <li> Retouche </li>
        <li>Site internet</li>
        <li>Graphisme</li>
      </ul>
      <p align="left"><span class="style1"><strong>Cellulaire en suisse : </strong></span><a href="#">+41 079 573 48 99</a></p>
      <p align="left"><strong class="style1">Skype : </strong> <a href="#">menardmam</a></p>
    <p align="left"><strong class="style1">Courriel :</strong><a href="https://web.archive.org/web/20100104192317/mailto:[email protected]">    [email protected]</a></p></td>
  </tr>
  </tbody>
</table>

Menardmam
fonte

Respostas:

139

Como os elementos ule lisão display: blockpor padrão - dê a eles margens automáticas e uma largura menor que o contêiner .

ul {
    width: 70%;
    margin: auto;
}

Se você alterou a propriedade de exibição ou fez algo que substitui as regras de alinhamento normais (como flutuá-los), isso não funcionará.

Quentin
fonte
4
se isso não o deixa feliz, provavelmente: stackoverflow.com/questions/2865380/…
Bruiser
10
Largura de configuração: auto; e exibir: bloco em linha; permitiria que seu ul se comportasse como uma linha de texto. Você poderia então usar text-align: center; no elemento pai. Isso também permitiria que seu ul aumentasse e diminuísse conforme o conteúdo interno muda, em vez de ter uma largura fixa.
i_a
@Chetabahana - Você está olhando para o texto, não para o elemento: jsfiddle.net/qwbexxog/3
Quentin
não está funcionando bem com todas as resoluções, o flex center está funcionando
Srinivas08
163

Para centralizar o ul e também ter os elementos li centralizados nele também , e fazer a largura do ul mudar dinamicamente, use display: inline-block; e envolva-o em um div centralizado.

<style type="text/css">
    .wrapper {
        text-align: center;
    }
    .wrapper ul {
        display: inline-block;
        margin: 0;
        padding: 0;
        /* For IE, the outcast */
        zoom:1;
        *display: inline;
    }
    .wrapper li {
        float: left;
        padding: 2px 5px;
        border: 1px solid black;
    }
</style>

<div class="wrapper">
    <ul>
        <li>Three</li>
        <li>Blind</li>
        <li>Mice</li>
    </ul>
</div>

Atualizar

Aqui está um link jsFiddle para o código acima.

Aram Kocharyan
fonte
Esse é o problema que tive com as outras soluções, não funcionaria para os elementos li se eu os alterasse.
Aram Kocharyan,
Eu estava usando isso para o Bootstrap 3 nav e precisava adicionar float: none;ao ul.
Dylan Valade,
34

Eu amo flexbox:

ul {
  justify-content: center;
  display: flex;
}
Christian Michael
fonte
22

Passos :

  1. Escreva style="text-align:center;"para os pais divdeul
  2. Escrever style="display:inline-table;"paraul
  3. Escrever style="display:inline;"parali

ou usar

<div class="menu">
 <ul>
   <li>item 1 </li>
   <li>item 2 </li>
   <li>item 3 </li>
 </ul>
</div>

<style>
 .menu { text-align: center; }
 .menu ul { display:inline-table; }
 .menu li { display:inline; }
</style>
Dashrath
fonte
Temos que adicionar margem, caso contrário, é aninhado, verifique aqui jsfiddle.net/qwbexxog/4
Chetabahana
9

Esta é a melhor maneira de centralizar UL dentro de qualquer contêiner DIV.

Esta solução CSS não usa as propriedades Width e Float. Flutuar: Esquerda e Largura: 70%, causará dores de cabeça quando precisar duplicar seu menu em páginas diferentes com itens de menu diferentes.

Em vez de usar largura, usamos preenchimento e margem para determinar o espaço ao redor do texto / item de menu. Além disso, em vez de usar Float: Left no elemento LI, use display: inline-block.

Ao flutuar seu LI para a esquerda, você literalmente flutua seu conteúdo para a esquerda e então deve usar um dos Hacks mencionados acima para centralizar seu UL. Display: inline-block cria sua propriedade Float para você (mais ou menos). Ele pega seu elemento LI e o transforma em um elemento de bloco que fica lado a lado (não flutuante).

Com design responsivo e usando frameworks como Bootstrap ou Foundation, haverá problemas ao tentar flutuar e centralizar o conteúdo. Eles têm algumas classes integradas, mas é sempre melhor fazer isso do zero. Esta solução é muito melhor para menus dinâmicos (como o sistema de menus Adobe Business Catalyst).

A referência para este tutorial pode ser encontrada em: http://html-tuts.com/center-div-image-table-ul-inside-div/

HTML

<div class="container">
        <ul>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
        </ul>
    </div>

CSS

.container {
    text-align: center;
    border: 1px solid green;
}
.container ul {
    border: 2px solid red;
    display: inline-block;
    margin: 10px 0;
    padding: 2px;
}
.container li {
    display: inline-block;
}
.container li a {
    display: inline-block;
    background: #444;
    color: #FFF;
    padding: 5px;
    text-decoration: none;
}
Especialistas DSA Web
fonte
6

Poderia ser

div ul
{
 width: [INSERT FIXED WIDTH]
 margin: 0 auto;
}

ou

div li
{
text-align: center;
}

depende de como deve ser (ou da combinação deles)

FP
fonte
2
A última opção não centralizaria os itens da lista, apenas seu conteúdo embutido.
Quentin de
Ainda assim, se <li>não tiver estilo, parece o mesmo.
FP
4

Para centralizar um objeto de bloco (por exemplo, o ul ) você precisa definir uma largura nele e, em seguida, você pode definir as margens esquerda e direita do objeto como automático.

Para centralizar o conteúdo embutido do objeto de bloco (por exemplo, o conteúdo embutido de li) você pode definir a propriedade css text-align: center;.

anddoutoi
fonte
1

Experimentar

div#divID ul {margin:0 auto;}
Keir
fonte
1

Basta adicionar text-align: center;ao seu <ul>. Problema resolvido.

Jonny Haynes
fonte
1

Interessante, mas tente isso com elementos li flutuados dentro da ul: Exemplo aqui

O problema agora: o ul precisa de uma largura fixa para realmente se sentar no centro. No entanto, queremos ser em relação à largura do contêiner (ou dinâmico), margin: 0 auto no ul não funciona.

Uma maneira melhor é abandonar a lista UL / Li e usar um exemplo de abordagem diferente aqui

Plippie
fonte
0

Se você sabe a largura do ul, você pode simplesmente definir a margem doul para0 auto;

Isso irá alinhar ulo meio do div que o contém

Exemplo:

HTML:

<div id="container">
 <ul>
  <li>Item1</li>
  <li>Item2</li>
 </ul>
<div>

CSS:

  #container ul{
    width:300px;
    margin:0 auto;
  }
Jamie Dixon
fonte
0

Aqui está a solução que pude encontrar:

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

#wrapper li{
  float:left;
  position:relative;
}
Adam Boostani
fonte
0

Outra opção é:

HTML

<nav>
  <ul class = "main-nav"> 
   <li> Productos </li>
   <li> Catalogo </li>
   <li> Contact </li>  
   <li> Us </li>
  </ul>
</nav>    

CSS:

nav {
  text-align: center;
}

nav .main-nav li {
  float: left;
  width: 20%;
  margin-right: 5%;
  font-size: 36px;
  text-align: center;
}
Trapo
fonte
0

Tenho procurado o mesmo caso e tentei todas as respostas alterando a largura de <li>.
Infelizmente, todos não conseguiram obter a mesma distância à esquerda e à direita da <ul>caixa.

A correspondência mais próxima é esta resposta, mas ela precisa ajustar a mudança de largura com preenchimento

.container ul {
    ...
    padding: 10px 25px;
}

.container li {
  ...
  width: 100px;
}

Veja o resultado abaixo, todas as distâncias entre <li>também até a <ul>caixa são as mesmas.insira a descrição da imagem aqui

Você pode verificar neste jsFiddle:
http://jsfiddle.net/qwbexxog/14/

Chetabahana
fonte
-1
<div id="container">
  <table width="100%" height="100%">
    <tr>
      <td align="center" valign="middle">
        <ul>
          <li>item 1</li>
          <li>item 2</li>
          <li>item 3</li>
        </ul>
      </td>
    </tr>
  </table>
</div>
Sua mãe
fonte
-4

use tags de centro da velha escola

<div> <center> <ul> <li>...</li> </ul></center> </div>

:-)

Justastefan
fonte
Você deve evitar o uso de expressões de tipo de estilo no código de marcação. É para isso que o CSS foi feito!
FP
1
Viável, mas observe que: "O centerelemento foi descontinuado no HTML 4.01 e não é compatível com XHTML 1.0 Strict DTD" em w3schools.com/TAGS/tag_center.asp
okw
4
suspiro W3Schools fornecendo informações incompletas e erradas, como de costume. Foi descontinuado no 4.0, não no 4.01, e não aparece em nenhuma variante do Strict (destacar o XHTML 1.0 é uma escolha estranha).
Quentin de
Como mencionado antes, eles foram descontinuados no HTML 4.01 ... isso também é apenas uma prática ruim ...
Jonny Haynes
2
Sim, ele não deveria usar esse tipo de tag, mas isso não é motivo para merecer uma resposta negativa. Às vezes, queremos a solução mais gorda. E para mim essa resposta é positiva.
sonhador de