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.