web-dev-qa-db-fra.com

Centrer <ul> <li> dans div

Après quelques recherches, je n’ai pas trouvé le moyen approprié de centrer une liste de <li> sur une largeur fixe div.

Regardez la page .. Cela ne marche pas non plus!

csshtmlhtml-lists
76
menardmam

Puisque les éléments ul et li sont display: block par défaut, donnez-leur des marges auto et une largeur inférieure à leur conteneur .

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

Si vous avez modifié leur propriété display ou effectué quelque chose qui remplace les règles d'alignement normales (telles que leur flottement), cela ne fonctionnera pas. 

122
Quentin

Pour centrer ul et et centrer également les éléments li, et modifier la largeur de ul de façon dynamique, utilisez la commande display: inline-block; et l'envelopper dans un div centré.

<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>

Mettre à jour

Voici un lien jsFiddle vers le code ci-dessus.

152
Aram Kocharyan

Pas :

  1. Ecrivez style="text-align:center;" au parent div de ul
  2. Écrivez style="display:inline-table;" dans ul
  3. Écrivez style="display:inline;" dans li

ou utiliser

<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>
20
Dashrath

C'est un meilleur moyen de centrer les UL dans tous les conteneurs DIV. 

Cette solution CSS n'utilise pas les propriétés Width et Float. Flottante: gauche et largeur: 70%, vous causera des maux de tête lorsque vous devez dupliquer votre menu sur différentes pages avec différents éléments de menu. 

Au lieu d'utiliser width, nous utilisons padding et margin pour déterminer l'espace autour du texte/élément de menu. De plus, au lieu d'utiliser Float: Left dans l'élément LI, utilisez display: inline-block. 

En faisant flotter votre LI vers la gauche, vous faites littéralement flotter votre contenu vers la gauche, puis vous devez utiliser l'un des hack mentionnés ci-dessus pour centrer votre UL. Affichage: inline-block crée votre propriété Float pour vous (en quelque sorte). Il prend votre élément LI et le transforme en un élément de bloc placé côte à côte (non flottant). 

Avec Responsive Design et l'utilisation de frameworks tels que Bootstrap ou Foundation, il y aura des problèmes lors de la tentative de flottement et de centrage du contenu. Ils ont des classes intégrées, mais il est toujours préférable de le faire à partir de zéro. Cette solution est bien meilleure pour les menus dynamiques (tels que le système de menus Adobe Business Catalyst).

La référence de ce didacticiel est disponible à l'adresse: 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;
}
8
DSA Web Specialists

J'adore les flexbox:

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

Pourrait être soit

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

ou

div li
{
text-align: center;
}

cela dépend de son apparence (ou de sa combinaison)

5
Florian Peschka

Pour centrer un objet de bloc (par exemple, la ul), vous devez lui définir une largeur, puis vous pouvez définir les marges gauche et droite de ces objets sur auto.

Pour centrer le contenu en ligne de l'objet bloc (par exemple, le contenu en ligne de li), vous pouvez définir la propriété css text-align: center;.

2
anddoutoi

Essayer 

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

Intéressant mais essayez ceci avec des éléments li flottants à l'intérieur du ul: Exemple ici

Le problème maintenant: le ul a besoin d’une largeur fixe pour s’asseoir réellement au centre. Cependant, nous voulons que cela soit relatif à la largeur du conteneur (ou dynamique), margin: 0 auto sur ul ne fonctionne pas.

Une meilleure solution consiste à abandonner la liste UL/Li et à utiliser une approche différente exemple ici

1
Plippie

Ajoutez simplement text-align: center; à votre <ul>. Problème résolu.

1
Jonny Haynes

Je cherchais le même cas et ai essayé toutes les réponses en modifiant la largeur de <li>.
Malheureusement, tous n'ont pas réussi à obtenir la même distance à gauche et à droite de la boîte <ul>. 

La correspondance la plus proche est cette réponse mais il faut que ajuste le changement de largeur avec le remplissage}

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

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

Voir le résultat ci-dessous, toutes les distances entre <li> et la case <ul> sont identiques.  enter image description here

Vous pouvez le vérifier sur ce jsFiddle:
http://jsfiddle.net/qwbexxog/14/

0
Chetabahana

Voici la solution que j'ai pu trouver:

#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;
}
0
iMad

Si vous connaissez la largeur de ul, vous pouvez simplement définir la marge de ul sur 0 auto;.

Cela alignera la ul au milieu du div contenant

Exemple:

HTML: 

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

CSS: 

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

Une autre option est:

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;
}
0
Trapo