Comment centrer une liste non ordonnée (``) à l'intérieur d'une division ?

Comment aligner horizontalement ul au centre d'un div ?

Lorsque vous êtes confronté au centrage d'une liste non ordonnée (

) dans un div à l'aide de CSS, il existe plusieurs solutions pour relever ce défi. Voici un aperçu du CSS fourni et des méthodes suggérées pour obtenir le résultat souhaité :

Le CSS donné :

.container { 
    clear: both; 
    width: 800px; 
    height: 70px; 
    margin-bottom: 10px;
    text-align: center;
}

.container ul { 
    padding-left: 20px; 
    margin: 0; 
    list-style: none;
}

.container ul li { 
    margin: 0; 
    padding: 0; 
}

Copier après la connexion

Avec la propriété text-align: center; appliqué à .container, il semble que vous visiez à tout centrer dans le conteneur, y compris le ul. Cependant, cette propriété aligne uniquement le contenu textuel d'un élément, pas l'élément lui-même.

Voici quelques approches pour centrer horizontalement votre ul dans le div :

Solution 1 : Utiliser margin's auto :

Cette méthode consiste à définir la marge : 0 auto ; sur l'ul, lui permettant d'avoir des marges appliquées symétriquement, le plaçant efficacement au centre :

.container ul {
    margin: 0 auto;
}

Copier après la connexion

Solution 2 : Utiliser display: table;:

Ceci La solution tire parti du mode de rendu de table de la propriété display. En définissant l'affichage : tableau ; sur l'ul, vous le transformez en conteneur de table. Ensuite, margin : 0 auto ; centrera l'ul dans le div de la même manière que dans la solution 1 :

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

Copier après la connexion

Solution 3 : implémentation de text-align: center; et inline-block :

Cette méthode utilise l'affichage : inline-block ; propriété sur ul. Lorsqu'il est combiné avec text-align: center; sur le conteneur parent, il place l'ul au centre en tant qu'élément en ligne dans le flux de texte :

.container { 
    text-align: center;
}

.container ul { 
    display: inline-block;
}

Copier après la connexion

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!