Comment centrer une liste non ordonnée horizontalement dans un div ?

Comment aligner horizontalement une UL au centre d'un DIV

Dans le HTML donné, la liste non ordonnée (

) est placée dans un div et le but est de l'aligner horizontalement au centre du div. Pour y parvenir, vous pouvez utiliser l'une des approches suivantes :

Solution 1 : Utiliser max-width et margin

ul {
  max-width: 400px;
  margin: 0 auto;
}

Cette méthode définit une largeur maximale pour l'ul et applique des marges gauche et droite égales pour le centrer automatiquement dans le div.

Solution 2 : Utiliser text-align with inline-block

.container {
  text-align: center;
}

ul {
  display: inline-block;
}

Cette solution aligne le div à l'aide de text-align: center et fait de l'ul un élément de bloc en ligne. Comme les éléments de bloc en ligne respectent la propriété text-align, l'ul devient centré.

Solution 3 : Utiliser display: table et margin

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

Cette méthode implique définir l'ul pour qu'il s'affiche sous forme de tableau, ce qui l'amène à se comporter comme un élément de bloc et à se centrer automatiquement dans le div.

Solution 4 : Utiliser position, left et transform

.container {
  position: relative;
}

ul {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Cette approche positionne l'ul absolument dans le div, le déplace de 50 % depuis la gauche en utilisant left: 50%, et enfin le recule de 50% via la transformation : TranslateX(-50%).

Solution 5 : Exploiter Flexbox

.container {
  display: flex;
  justify-content: center;
}

Avec Flexbox, définir le conteneur pour qu'il s'affiche en tant que flexbox et spécifier le contenu justifié : center garantit que l'ul est centré horizontalement dans le div.

Ces solutions fournissent diverses techniques pour centrer un ul horizontalement dans un div, vous permettant de sélectionner l'approche la plus appropriée en fonction de la compatibilité du navigateur et du comportement souhaité.

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!