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

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

Dans la conception Web, il est souvent souhaitable de centrer horizontalement une liste de liens, tels que ceux trouvés dans les pieds de page. Bien que l'alignement du texte soit simple, centrer une liste non ordonnée sans spécifier sa largeur peut être délicat.

Question :

Comment centrer horizontalement une liste non ordonnée de largeur inconnue, où les éléments de la liste doivent être affichés côte à côte, et non les uns en dessous des autres ?

Réponse :

Option 1 : affichage en ligne

Si les éléments de la liste peuvent être configurés pour s'afficher : en ligne, la solution est simple :

<code class="css">#footer {
  text-align: center;
}

#footer ul {
  list-style: none;
}

#footer ul li {
  display: inline;
}</code>

Option 2 : Bloquer l'affichage avec positionnement

Si display : le bloc doit être utilisé pour les éléments de la liste, considérez le CSS suivant :

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