Comment centrer une liste non ordonnée dans une division à largeur fixe ?

Comment centrer une liste non ordonnée dans un DIV à largeur fixe

Lorsque vous travaillez avec la conception Web, l'alignement des éléments verticalement et horizontalement peut être une tâche courante. Un de ces scénarios consiste à centrer une liste non ordonnée (

) dans un div à largeur fixe.

Solution

Pour obtenir un alignement centré, une combinaison de propriétés d'affichage CSS et d'éléments d'habillage dans un centered div est utilisé.

Tout d’abord, créez un wrapper div et appliquez-lui la propriété text-align: center. Cela centrera horizontalement le contenu dans le div.

Ensuite, enveloppez le

élément dans le div centré et appliquez les propriétés CSS suivantes :

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

• display: inline-block; : Cette propriété permet à l'élément
  pour se comporter comme un élément en ligne tout en occupant une largeur fixe.
  • margin: 0; et padding : 0 ; : ces propriétés suppriment toutes les marges ou remplissage par défaut appliqués au
    .

    Enfin, pour centrer le

  • éléments dans le
    , appliquez la propriété CSS suivante :

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

    • float: left; : Cette propriété crée une mise en page en ligne pour le
    • articles.
    • rembourrage : 2px 5px ; et bordure : 1px noir uni ; (facultatif) : ajustez ces valeurs pour styliser le
    • éléments comme vous le souhaitez.

    En combinant ces techniques CSS, le

    et son
    • les éléments seront centrés dans le div à largeur fixe, offrant un alignement visuellement attrayant.

      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!