Comment centrer horizontalement une liste non ordonnée dans une division ?

Centrer horizontalement une liste non ordonnée dans une division

Problème : Centrer une liste non ordonnée (

) horizontalement dans une div à l'aide de CSS pose un problème défi. Les tentatives d'alignement de la liste en utilisant "text-align: center" ou le positionnement à gauche (gauche: 50%) se sont révélées infructueuses.

Objectif : L'objectif est d'obtenir un bon alignement horizontal du liste dans le conteneur div.

Solution :

Pour centrer un

élément horizontalement dans un div, vous pouvez utiliser diverses techniques CSS :
1. max-width and margin : Définissez la largeur maximale de l'élément
   élément et ajoutez les marges gauche et droite de "auto" pour le centrer automatiquement dans le div parent.
   • display: inline-block et text-align: Définissez l'affichage du L'élément s'alignera alors comme un élément de texte dans le texte centré.
   • affichage : tableau et marge : Semblable à la technique précédente, définissez l'affichage de l'élément
     élément à "table" et appliquez "margin: auto" pour l'aligner au centre.
     • position : absolue, traduireX et gauche : Cette méthode nécessite de définir la position de l'élément
       élément à "absolu" et en utilisant les propriétés left et transform pour le traduire de 50 % dans la direction opposée et le centrer horizontalement.
       • Disposition Flexbox : Utilisez le module Flexible Box en définissant l'affichage du div parent pour "flex" et en appliquant "justify-content: center" pour centrer le
         élément à l'intérieur.

Exemple de code :

/* Solution 1: max-width and margin */
.container ul {
    max-width: 400px;
    margin: 0 auto;
}

/* Solution 2: display: inline-block and text-align */
.container-2 {
    text-align: center;
}

.container-2 ul {
    display: inline-block;
}

/* Solution 3: display: table and margin */
.container-3 ul {
    display: table;
    margin: 0 auto;
}

/* Solution 4: position: absolute, translateX, and left */
.container-4 ul {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Solution 5: Flexbox Layout */
.container-5 {
    display: flex;
    justify-content: center;
}

.container-5 ul {
    list-style-position: inside;
}

Copier après la connexion

En appliquant l'une de ces solutions à votre CSS, vous pouvez efficacement centrer la liste non ordonnée horizontalement dans le conteneur div.

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!