Comment centrer <ul> <li>dans un div ?

Question

Comment centrer une liste non ordonnée de <li> en 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:menardmam@hotmail.com">    info@studioteknik.com</a></p></td>
  </tr>
  </tbody>
</table>

Answer 1

Pour centrer l'ul et Les éléments li y sont également centrés. pour que la largeur de l'ul change dynamiquement, utilisez display : inline-block ; et intégrez-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>

Mise à jour

Voici un lien jsFiddle au code ci-dessus.

Answer 2

Depuis ul y li Les éléments sont display: block par défaut - leur donner marges automatiques et une largeur inférieure à celle de leur conteneur. .

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

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

Answer 3

Étapes :

1. Écrire à style="text-align:center;" pour les parents div de ul
2. Écrire à style="display:inline-table;" a ul
3. Écrire à style="display:inline;" a 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>

Answer 4

Cela pourrait être

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

ou

div li
{
text-align: center;
}

dépend de ce à quoi il doit ressembler (ou de la combinaison de ceux-ci)

Answer 5

Pour centrer un objet du bloc (par exemple, l'objet ul ), vous devez définir une largeur pour cet objet, puis vous pouvez définir les marges gauche et droite de cet objet sur auto.

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