css - centre une image horizontaly à l'intérieur d'un li

C'est incroyable comment ne peut pas, je viens de tirer une tâche simple.

Nous souhaitons avoir un menu ul (liste) affiché en ligne, où, en plus nous avons une image et, au fond, nous avons un point d'ancrage.

Quelque chose comme ci-dessus:

  <iimg>    <iimg>    <iimg>
 <anchor>  <anchor>  <anchor>

La solution doit être valide pour IE 7 trop.

J'ai essayé text-align centré sur l'image. Pas de chance;
J'ai essayé display:block; sur la li, sur -img sur les deux...
J'ai également défini des largeurs ici et là (mais les images peuvent avoir des largeurs variables (pas sûr));
J'ai essayé margin: 0 auto; mais c'est axé sur la page, mais pas sur la LI. :///

Puis-je avoir de l'aide ici plz ?

http://jsfiddle.net/4E7Lu/

  • Vous ne pouvez pas avoir un "bloc" de l'élément à l'intérieur d'un 'inline' élément. Question: savez-vous combien de li éléments que vous aurez au moment de la rédaction du CSS?
  • tu veux dire: un élément inline ne peut pas contenir un élément de bloc, même si cet élément de bloc comme une largeur définie ? - Oui, je sais combien de li éléments que je vais avoir. Faisons-les 3. Pour la clarté de l'exposé.
  • Le travail autour de est inline-block. Je viens de vérifié si... IE7 ne l'accepte pas lorsque l'élément par défaut à l'affichage du bloc. Je vais voir si je peux trouver une solution.
InformationsquelleAutor MEM | 2011-12-10
  1. 4
    ul li {
    display: block;
    float: left;
    text-align: center;
}

    Juste être sûr de faire un clearfix après la ul. Comme dans:

    <div style="clear: both;"></div>
    InformationsquelleAutor U-DON
  2. 2

    Si vous faites le ul affichage inline-block, et de mettre l'ancre et de l'image à afficher comme block, vous pouvez centrer via margin: 0 auto;.

    http://jsfiddle.net/4E7Lu/1/

    • IE 7 ne fonctionnera pas là parce que li ne semble pas être naturelle des éléments inline. Suis-je tort ?
    • malheureusement, vous avez raison... Ce mise à jour de violon au moins les afficher correctement, mais ne pas centrer l'image (Dans IE7 bien sûr, il fonctionne partout ailleurs).
    InformationsquelleAutor Brigand
  3. 0

    Je voudrais appliquer l'image comme image d'arrière-plan à chaque li élément. Il est facile de position à l'aide de background-position et maintient votre balisage HTML propre pour le RÉFÉRENCEMENT. Vous pouvez ensuite utiliser Les sprites CSS pour faire le chargement des images plus rapidement.

    • Qui pourrait en fait... je souhaite que rien comme cela arrive un jour, où nous avons ces images à partir de db ou plus. Si cela arrive un jour, je crois que nous ne pouvons pas utiliser le fond technique. :s
    • Comment voulez-vous placer l'ancre du fond et de l'image sur le dessus, concernant votre suggestion ? Merci.
    InformationsquelleAutor Tak
  4. 0

    Viens de voir cela, pourrait vous aider.

    http://css.maxdesign.com.au/listamatic/horizontal01.htm

    InformationsquelleAutor Ric