Centrer une liste dans une Div

Bonsoir,

En bas de page je voudrais placer à l’intérieure d’une Div une liste qui puisse se centrer
sur la feuille quelque soit le nombre d’éléments

Est-ce que c’est possible ? et comment le faire ?

<div id="navig">
    <ul>
        <li><a href="/"><span>Accueil</span></a></li>
        <li><a href="Distinction-Photo1.html"><span>Page 1</span></a></li>
        <li><a href="Distinction-Photo2.html"><span>Page 2</span></a></li>
        <li><a href="Distinction-Photo3.html"><span>Page 3</span></a></li>
        <li><a href="Distinction-Photo4.html"><span>Page 4</span></a></li>
        <li><a href="Distinction-Photo5.html"><span>Page 5</span></a></li>
    </ul>
</div>

#navig {
         position : fixed;
         bottom:0px;
         background:#000;
         line-height:normal;
      }

#navig ul {
        margin:0;
        padding:10px 10px 0 50px;
        list-style:none;
      }

#navig li {
       display:inline;
       margin:0;
       padding:0;
      }

Merci pour votre aide.

Salutations
Modifié par jmde1 (08 Jan 2011 - 12:19)

Bonjour,

Puisque tu as sorti ton élément #navig du flux avec la position fixed, celui-ci n'occupe plus que la largeur de son contenu et non plus toute la largeur de son parent.
Il va donc falloir commencer par attribuer une largeur à #navig.

Ensuite, il suffira de lui affecter un text-align: center pour centrer ses éléments en ligne (tels que les li).

Bonne chance.

Bonjour Raphael,

Merci pour ta réponse,

J’ai modifié #navig de cette façon :

#navig {
position : fixed;
bottom:0px;
width:600px;
text-align: center;
background:#000;
line-height:normal;
}
Est-ce correct ? Car la liste ne se centre pas.

Salutations

jmde1 a écrit :

Est-ce correct ? Car la liste ne se centre pas.

Sur quel navigateur ?
Je viens de tester et c'est bon chez moi (en supprimant les 50px de padding à gauche de ul bien-sûr).

Bonjour Raphael,

Non ce n'est pas le navigateur qui est en cause, c'est moi
en voulant ajouter:

#navig a
background:url(../) no-repeat right top;

et

#navig a:hover
background:url(../) no-repeat right top;

Mais je n'y arrive pas.

Peux-tu m'aider ?

Salutations