Maison > interface Web > tutoriel CSS > Comment centrer une liste non ordonnée sans utiliser de divisions parents ?

Comment centrer une liste non ordonnée sans utiliser de divisions parents ?

Patricia Arquette
Libérer: 2024-10-29 23:39:29
original
390 Les gens l'ont consulté

How to Center an Unordered List Without Using Parent Divs?

Centrage d'une liste non ordonnée sans wrappers parents

Cette question aborde le défi de centrer une liste non ordonnée (

    ) sans s'appuyer sur un élément div parent. L'objectif est de préserver l'alignement à gauche dans les éléments de la liste (
  • ).

    Solution :

    Le code CSS suivant centre efficacement la liste tout en conservant l'alignement à gauche pour les éléments de la liste :

    ul {
      display: table;
      margin: 0 auto;
    }
    Copier après la connexion

    Explication :

    Paramètre d'affichage : table transforme la liste en tableau, ce qui lui permet de remplir la largeur disponible. La marge : 0 auto propriété centre automatiquement le tableau, et donc la liste, sur la page.

    Exemple :

    <code class="html"><ul>
      <li>56456456</li>
      <li>4564564564564649999999999999999999999999999996</li>
      <li>45645</li>
    </ul></code>
    Copier après la connexion

    Conclusion :

    Cette solution répond au besoin de centrer une liste non ordonnée sans créer de wrappers supplémentaires dans le HTML. En utilisant les propriétés automatiques display: table and margin: 0, il aligne la liste horizontalement au centre tout en conservant l'alignement à gauche de ses éléments.

    Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal