Centrer une image en CSS

Bonjour,

je viens de passer pas mal de temps sur le centrage d'image (et de tableaux) en CSS et je crois avoir trouvé ZE solution
Cette solution a été testée sous FF2.0 et IE6.0

1° Centrer les images :

Code:

---

<img src="abeille.jpg" border=0 width=165 height=110>

---

Code:

---

1 2 3 4 5

img{ display:block; width:auto; margin-left:auto; margin-right:auto;

---

Pour les images à ne pas centrer

Code:

---

<img class="pacentre" src="alert.jpg" border=0 width=250 height=132>

---

Code:

---

1 2 3

.pacentre{ display:inline; }

---

Pourquoi pas le mettre dans la FAQ (après accord des sommités, bien sûr)... ces vieux débutants ont toutes les audaces:lol:

Par contre, en jouant avec la dimension de width, on obtient des résultats surprenants, tant en px qu'en %



Merci

Bonjour,
le centrage d'une image s'obtient plus simplement sans changer son display en
ajoutant un text-align:center sur le bloc conteneur ;)

Citation:

---

Envoyé par Erwan31

Bonjour,
le centrage d'une image s'obtient plus simplement sans changer son display en
ajoutant un text-align:center sur le bloc conteneur ;)

---

Merci,

mais je doute que rajouter un conteneur <div></div> à une image qui n'en a nul besoin soit une réelle simplification.

@+

Citation:

---

Envoyé par veevee

mais je doute que rajouter un conteneur <div></div> à une image qui n'en a nul besoin soit une réelle simplification.

---

D'un point de vue CSS c'est bien plus simple et d'autre part une image a toujours un conteneur mais ça dépendra en effet de ce que vous voulez faire.

Citation:

---

Envoyé par Erwan31

Bonjour,
le centrage d'une image s'obtient plus simplement sans changer son display en
ajoutant un text-align:center sur le bloc conteneur ;)

---

Je confirme la solution en encadrant une image d'un div avec une class pour le xhtml

Code:

---

1 2 3

<div class="centrer"> <img class="centrer" src="entree.jpg" alt="entrée" height="150" width="150"/> </div>

---

et pour le css il suffit de faire

Code:

---

1 2 3 4

.centrer { text-align:center; }

---

Et sa fonctionne tip top.

Citation:

---

Envoyé par veevee

Merci,

mais je doute que rajouter un conteneur <div></div> à une image qui n'en a nul besoin soit une réelle simplification.

@+

---

+1

Je cherchais depuis longtemps le moyen de le faire.