web-dev-qa-db-fra.com

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

Il est courant d'avoir un ensemble de liens dans un pied de page représenté dans une liste, tels que:

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

Je veux que tout dans div # footer soit centré horizontalement. S'il s'agissait d'un paragraphe, vous diriez simplement: p { text-align: center; }. Ou si je connaissais la largeur de la <ul> Je pourrais juste dire #footer ul { width: 400px; margin: 0 auto; }.

Mais comment centrer les éléments de la liste non ordonnée sans définir de largeur fixe sur le <ul>?

EDIT: clarification - les éléments de la liste devraient être côte à côte, pas ci-dessous.

htmlcsscentering
69
philfreo

La solution, si vos éléments de liste peuvent être display: inline est assez facile:

#footer { text-align: center; }
#footer ul { list-style: none; }
#footer ul li { display: inline; }

Cependant, vous devez souvent utiliser display:block Sur ton <li>s. Le CSS suivant fonctionnera dans ce cas:

#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%; }
164
philfreo

Utilisez les fichiers ci-dessous pour résoudre votre problème

#footer{ text-align:center; height:58px;}
#footer ul {  font-size:11px;}
#footer ul li {display:inline-block;}

Note: N'utilisez pas float:left en li. cela fera que votre li s'aligne à gauche.

34
Yuvaraj

Une autre solution:

#footer { display:table; margin:0 auto; }
#footer li { display:table-cell; padding: 0px 10px; }

Alors ul ne saute pas à la ligne suivante en cas de zoom de texte.

12
Andrey

Cela dépend si vous voulez dire que les éléments de la liste sont en-dessous du précédent ou à droite du précédent, à savoir:

Home
About
Contact

ou

Home | About | Contact

Le premier que vous pouvez faire simplement avec:

#wrapper { width:600px; background: yellow; margin: 0 auto; }
#footer ul { text-align: center; list-style-type: none; }

La seconde pourrait se faire comme ceci:

#wrapper { width:600px; background: yellow; margin: 0 auto; }
#footer ul { text-align: center; list-style-type: none; }
#footer li { display: inline; }
#footer a { padding: 2px 12px; background: orange; text-decoration: none; }
#footer a:hover { background: green; color: yellow; }
8
cletus

Essayez d’emballer la liste dans un div et de lui donner la propriété inline au lieu de votre liste.

2
Martin Dale Lyness

La réponse de philfreo est excellente, cela fonctionne parfaitement (multi-navigateur, avec IE 7+). Ajoutez simplement mon exp pour la balise anchor à l'intérieur de li.

#footer ul li { display: inline; }
#footer ul li a { padding: 2px 4px; } /* no display: block here */

#footer ul li { position: relative; float: left; display: block; right: 50%; }
#footer ul li a {display: block; left: 0; }
0
Jacky Nguyen