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

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

Dans les pieds de page de sites Web, il est courant d'avoir une liste de liens centrés horizontalement. Bien que centrer une liste de largeur fixe soit simple, centrer une liste de largeur inconnue pose un défi. Cet article explore une solution à ce scénario.

Le problème

Considérez le code HTML suivant :

<code class="HTML"><div id="footer">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div></code>

Nous voulons que l'intégralité du contenu de la div #footer soit centré horizontalement. Définir text-align: center sur la balise de paragraphe fonctionnerait, mais c'est inapplicable ici puisque les éléments de la liste doivent être côte à côte, pas les uns sous les autres.

Solutions

Solution pour Listes avec des éléments en ligne :

Si les éléments de la liste peuvent être affichés en ligne, le CSS suivant suffira :

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

#footer ul {
    list-style: none;
}

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

Solution pour les listes avec des éléments bloqués :

Si les éléments de la liste doivent avoir un bloc display:, un CSS plus complexe est requis :

<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 solution utilise les propriétés float et left et right pour ajuster les positions de la liste et ses éléments en conséquence, assurant un centrage horizontal quelle que soit la largeur inconnue de 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!