Comment centrer une liste non ordonnée de largeur inconnue en CSS ?

Centrage d'une liste non ordonnée de largeur inconnue

Dans la conception Web, il est courant d'avoir une liste non ordonnée de liens dans un pied de page pour faciliter la navigation. Cependant, si la largeur de la liste est inconnue, il peut être difficile de centrer horizontalement les éléments de la liste.

Une solution pour les listes où les éléments peuvent être affichés en ligne est :

<code class="css">#footer { text-align: center; }
#footer ul { list-style: none; }
#footer ul li { display: inline; }</code>

Cela applique le centre d'alignement du texte au pied de page, supprime le style de liste par défaut et définit les éléments de la liste à afficher en tant qu'éléments en ligne.

Cependant, dans les cas où les éléments de la liste doivent être affichés sous forme de blocs, le code CSS suivant peut être utilisé :

<code class="css">#footer { width: 100%; overflow: hidden; }
#footer ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
#footer ul li { position: relative; float: left; display: block; right: 50%; }</code>

Cette approche définit le pied de page sur toute la largeur et masque tout débordement. La liste non ordonnée est positionnée de manière absolue, flotte vers la gauche, puis décalée de 50 % vers la gauche. Les éléments de la liste sont également positionnés de manière absolue, flottant vers la gauche et décalés de 50 % vers la droite. Cela centre efficacement la liste non ordonnée horizontalement, quelle que soit sa largeur.

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!