Mettre à jour un tutorial pour centrer les images

Bonjour tout le monde, en particulier les modérateurs et admins du site.

Je viens de suivre ce tutorial, car je ne me rappellais plus comment centre une image horizontalement.

Et même en appliquant tous ce qui étais écrit ca ne passais pas.

J'ai rajouté juste une balise pour que toutes images (pas besoin de s'embeter avec les div) portant une classe (dans mon exemple centrer (pas très original je vous l'accorde lol) ) soit centré dans son conteneur.

La balise à rajouter était

display:block

Voici la CSS :

img.centrer{
	position:relative;
	display:block;
	margin-left: auto;
        margin-right: auto;
	width:480px;
}

Et ca marche à la perfection (voir lien).

Je n'ai tester que sous Firefox, Opéra. Pour l'instant je ne peux pas tester sous IE.
Modifié par Super_baloo8 (01 Jan 2007 - 23:37)

Bonjour,

Super_baloo8 a écrit :
Bonjour tout le monde, en particulier les modérateurs et admins du site.

Ah, c'est original.

Super_baloo8 a écrit :
La balise à rajouter était

display:block

Attention, ce n'est pas du tout "une balise" mais une règle CSS. De plus, c'est normal que ce soit nécessaire pour une image puisque c'est un élément qui se positionne par défaut en ligne. Une autre solution aurait été d'appliquer "text-align: center;" au conteneur de l'image.
Modifié par Eldebaran (02 Jan 2007 - 09:12)

Merci pour ma correction syntaxique (balise/règle) je ne le savais pas.

Je pense que ca serais pas mal de le rajouter au tutorial dont je donne le lien dans mon premier post, ainsi ca évite de toucher toute une div déjà mise en forme.

Salut.

C'est plus économique d'écrire :

[b]HTML[/b]
<p class="centrer"><img src="..." alt="..." /></p>
[b]CSS[/b]
p.centrer {
   text-align: center ;
}

en général, non ?

Ton image ne sera pas aligné si ton bloc comprenant l'image (donc la div) n'est pas en alignement centré.

Seule le texte peut etre aligné de cette maniere simple. C'est pour ca que je rajoute la règle CSS display:block, pour qu'il se comporte que un bloc a ce moment là.

Essayes tu verras bien
Modifié par Super_baloo8 (04 Jan 2007 - 18:52)