Comment centrer une liste horizontalement dans une division ?

Comment centrer une liste dans un div

Il est souvent souhaitable de centrer une liste d'éléments dans un div à largeur fixe. Ceci peut être réalisé grâce à une combinaison de techniques HTML et CSS.

Solution :

Pour centrer la liste et ses éléments enfants, nous employons les étapes suivantes :

1. Enveloppez la liste dans un div avec text-align: center;.
2. Set display: inline-block; sur la liste pour la centrer dans le div.
3. Définissez les marges et le remplissage appropriés sur la liste et ses éléments pour obtenir le résultat souhaité espacement.

Code :

<div class="wrapper">
    <ul>
        <li>List Item 1</li>
        <li>List Item 2</li>
        <li>List Item 3</li>
    </ul>
</div>

.wrapper {
    text-align: center;
}

.wrapper ul {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.wrapper li {
    float: left;
    padding: 2px 5px;
    border: 1px solid black;
}

Explication :

• L'emballage div centre la liste horizontalement.
• L'affichage du bloc en ligne sur la liste la positionne dans le div horizontalement également.
• Les marges et le remplissage de la liste et des éléments de la liste ajustent l'espacement et l'apparence des éléments.

En suivant ces étapes, vous pouvez centrer efficacement une liste au sein d'un div, garantissant une mise en page équilibrée et visuellement attrayante.

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!