Comment centrer une liste non ordonnée horizontalement avec une largeur variable ?

Alignement horizontal de listes non ordonnées de largeur inconnue

Dans le pied de page d'un site Web, il est courant d'avoir une liste de liens de navigation représentée sous la forme d'un liste non ordonnée. Pour garantir un centrage horizontal quelle que soit la largeur de la liste, la méthode conventionnelle consistant à définir une largeur fixe sur l'élément UL est souvent peu pratique.

Solution pour les éléments de liste en ligne

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

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

Cependant, lorsque les éléments de la liste doivent être affichés sous forme de blocs, le CSS suivant s'avère efficace :

<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 l'élément UL au centre de la page et fait flotter les éléments LI autour de lui, obtenant ainsi l'alignement horizontal souhaité.

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!