Comment puis-je centrer <ul> <li> en div

Comment puis-je centrer une liste non ordonnée <li>dans une largeur fixe 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>

Puisque les éléments ulet lisont display: blockpar défaut - donnez-leur des marges automatiques et une largeur plus petite que leur conteneur .

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

Si vous avez modifié leur propriété d'affichage ou fait quelque chose qui remplace les règles d'alignement normales (comme les faire flotter), cela ne fonctionnera pas.

Pour centrer l'ul et aussi centrer les éléments li dedans , et faire changer dynamiquement la largeur de l'ul, utilisez display: inline-block; et enveloppez-le 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.

J'adore la flexbox:

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

Pas :

1. Ecrire style="text-align:center;"au parent divdeul
2. Ecrire style="display:inline-table;"àul
3. Ecrire style="display:inline;"à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>

C'est une meilleure façon de centrer les UL à l'intérieur de n'importe quel conteneur DIV.

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

Au lieu d'utiliser la largeur, nous utilisons le remplissage et la marge pour déterminer l'espace autour de l'élément de texte / menu. De plus, au lieu d'utiliser Float: Left dans l'élément LI, utilisez display: inline-block.

En faisant flotter votre LI à gauche, vous faites littéralement flotter votre contenu vers la gauche et vous devez ensuite utiliser l'un des Hacks mentionnés ci-dessus pour centrer votre UL. Display: 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 qui se trouve côte à côte (non flottant).

Avec la conception réactive et l'utilisation de cadres tels que Bootstrap ou Foundation, il y aura des problèmes lorsque vous essayez de flotter et de centrer le 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).

Vous trouverez une référence pour ce didacticiel à 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;
}

Pourrait être soit

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

ou

div li
{
text-align: center;
}

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

Pour centrer un objet bloc (par exemple le ul), vous devez définir une largeur dessus, puis vous pouvez définir les marges gauche et droite des 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;.

Essayer

div#divID ul {margin:0 auto;}

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

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

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

Un meilleur moyen consiste à abandonner la liste UL / Li et à utiliser un exemple d' approche différent ici

Si vous connaissez la largeur du, ulvous pouvez simplement définir la marge du ulà0 auto;

Cela alignera le ulau 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;
  }

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

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

J'ai cherché le même cas et 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 <ul>boîte.

La correspondance la plus proche est cette réponse, mais il faut ajuster le changement de largeur avec un rembourrage

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

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

Voir le résultat ci-dessous, toutes les distances entre <li>également la <ul>boîte sont les mêmes.

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

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

utiliser des balises centrales oldschool

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

:-)