5568 sujets

Sémantique web et HTML

Centrer une image "en restant au norme"

Bonjour, pour aligner mes image je fait un simple <div align="center"> mais le validateur w3c naime pas trop ca.

Avec quoi je peut remplacer <div align="center"> de facon a que ce soit au norme ?

ps: ca serai plus pratique quand on appuis sur tabe apres avoir nomé le sujet on ce retrouve dans "message"
Et bien si tu veux être au norme, (tout dépend de quelle norme tu parles), en considérant que tu es en Strict, la séparation mise en forme/contenu est obligatoire en effet, et en plus ça te permet une plus grande souplesse d'utilisation pour un eventuel redesign ou une simple modification de mise en page.

Donc commence par préciser de quelles normes du W3C tu parles, xhtml, html, strict, transitionnal (donne ton doctype ce sera le plus simple).

Ensuite, si tu ne veux pas séparer contenu/mise en forme pour une raison X ou Y rien ne t'oblige à utiliser le xhtml1 Strict, tout dépend de tes besoins réels. Je pense personnelement que le passage au Strict est vraiment un atout indéniable et que le fait d'avoir la rigueur du XML permet une meilleure clarté.
Je vais faire du css, mais c'est tellement plus simple unsimple <center> :p

Sinon dans le tuto j'ai lu ca:
Attention à ne pas oublier de définir une largeur pour le conteneur, sinon il ne pourra logiquement pas être centré.


Heu, il faut que je fasse un block pour chaque image a centré puisque qu'aucune n'a la meme taille ?
Administrateur
"Heu, il faut que je fasse un block pour chaque image a centré puisque qu'aucune n'a la meme taille ?"

>> Tes images ont bien une taille définie, non? Donc ça suffit, tu ne vas pas en + leur rajouter un bloc autour Smiley cligne
Donc si je fais un truc du genre:
.CentrerImage{ text-align: center; }

ca devrais marcher ?
salut

et dans le cas ou l'on veut centrer les images mais pas le texte ?
cette solution marche ?

merci Smiley cligne
Il faut adapter : 

.CentrerImage img { text-align:center; }


ou encore 

.CentrerImage img { margin-left:auto; margin-right:auto; }
Désolé Kevin, mais ça ne marchera pas comme ça ! La première solution ne donnera rien car dans ce cas, tu dis de centrer le texte qui est contenu dans la balise IMG... Or, il ne peut pas y avoir de texte dans cette balise, donc, rien ne ce passera.

La deuxième solution est un peut plus interressante, malheureusement, IE ne comprend pas les marge automatique !

La meilleur solution consiste à ne pas mettre le texte et l'image dans un même conteneur et à centré les element dans le conteneur qui contiens l'image et à ne pas le faire dans le conteneur qui contiens le texte.

ça peut ressembler à ça :

.texte{
  text-align: left;
}
.image{
  text-align: center;
}


<p class="texte">
  mon texte aligné à gauche
  <div class="image"><img alt="" src="monimage.jpg" /></div>
</p>
En fait, je n'utilise pas le 
<img />
, mais plutôt le 
<div style="background-image:url('image.gif');">Image</div>
, donc ici, le 

margin-left:auto;
margin-right:auto;

fonctionne, même avec IE , je t'assure !

Je positionne en général mes pages comme ca : 

BODY { 
width:750px;
margin-left:auto;
margin-right:auto;
}
Ha oui, désolé, quand j'dis IE , c'est IE6 , j'teste qu'avec ca (enfin, d'abord, avec Firefox ;)) , et déjà j'me fais beaucoup de mal en voyant mes codages massacrés ...

Mais excusez moi alors pour cette affirmation qui n'est que partiellement vraie ....
Sujet clos
Aller à