Discussion :

[veevee]

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 HTML :

S�lectionner tout - Visualiser dans une fen�tre � part

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

Code CSS :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
img{
display:block;
width:auto;
margin-left:auto;
margin-right:auto;

Pour les images � ne pas centrer

Code HTML :

S�lectionner tout - Visualiser dans une fen�tre � part

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

Code CSS :

S�lectionner tout - Visualiser dans une fen�tre � part

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

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



Merci

[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

[veevee]

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.

@+

[Erwan31]

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.

[lodacom]

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
.centrer
{
    text-align:center;
    }

Et sa fonctionne tip top.

[jsd03]

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.