Comment centrer une liste non ordonnée sans DIV parent

En CSS, centrer une liste non ordonnée (

) tout en conservant la gauche- les éléments de liste alignés peuvent être difficiles sans utiliser de div parent. Voici comment obtenir cet effet :

L'extrait de code fourni, avec un div parent, utilise text-align: center sur le div et display: inline-block sur le ul pour centrer la liste. Cependant, cette méthode nécessite un wrapper div parent.

Pour centrer une liste non ordonnée sans div parent, les propriétés CSS telles que margin et text-align ne peuvent pas être utilisées efficacement car le

n'a pas de largeur fixe. .

La solution réside dans la configuration du

pour qu'il se comporte comme une table en utilisant display: table. Cela crée une structure semblable à un tableau où les lignes sont définies par des éléments de liste (
• ). En définissant margin: 0 auto sur
  , la table (c'est-à-dire la liste) est centrée dans son élément conteneur.

  Voici le code CSS qui obtient cet effet :

  ul {
    display: table;
    margin: 0 auto;
  }

  Pour démontrer, voici un extrait de code qui utilise le code HTML fourni mais sans div parent :

  
  
  
    
  56456456
      
  4564564564564649999999999999999999999999999996
      
  45645
    

  Ce code centrera la liste non ordonnée sur la page, tout en gardant les éléments de la liste alignés à gauche.