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

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

Lors de la création d'un pied de page avec un ensemble de liens représentés sous la forme d'une liste non ordonnée, il est souvent Il est souhaitable de centrer la liste horizontalement dans le pied de page. Bien qu'il soit simple de centrer des éléments de texte ou des éléments de largeur connue, centrer une liste non ordonnée de largeur inconnue présente un défi.

Éléments de liste en ligne

Si les éléments de la liste peut être affiché en ligne, la solution est simple :

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

Éléments de la liste de blocage

Cependant, dans certains cas, il peut être nécessaire d'utiliser display: block; sur les éléments de la liste. Dans ce cas, une solution légèrement plus complexe est requise :

<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>

Ce CSS positionne la liste non ordonnée au centre du pied de page et décale les éléments de la liste afin qu'ils s'alignent horizontalement dans la liste.

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!